如何實現懸停效果而不直接改變樣式？

我有一個陣營組件具有實現懸停效果，因爲這樣的：如何實現懸停效果而不直接改變樣式？

let style = { 
    backgroundColor: "blue" 
} 

class someComponent extends React.Component{ 

    constructor(props){ 
    super(props) 

    this.state = { 
     hover: false 
    } 
    } 

    handleHover(event) { 
    this.setState({ hover: true }); 
    } 

    handleExit(event) { 
    this.setState({ hover: false }); 
    } 

    render(){ 
    if(this.state.hover){ 
     style.backgroundColor = "red" 
    } else { 
     style.backgroundColor = "blue" 
    } 

    return(
     <Segment style={style} onMouseEnter={this.handleHover} onMouseLeave={this.handleExit} /> 
    ); 
    } 
}

然而，即使它的工作，我得到一個錯誤說：

警告：div傳遞一個樣式對象以前被變異。變異style已棄用。考慮事先克隆它。檢查Segment的render。

我擡頭一看，答案從這個post，和它說，實現這種方式：

const {styleFromProps} = this.props; 

const newStyle = {...styleFromProps, marginTop: '45px'};

然而，我的風格是外部類定義，我不傳遞任何造型從父組件向下。所以我不太清楚如何在我的當前代碼中實現這個答案。

問題（S）：

是這樣回答來實現懸停效果最好的方式，還是應該克隆組件，如錯誤提示？
我應該如何在我現有的組件中實現答案？必要時可以更改結構。

來源

2017-08-29 Phillip

如果出現任何混淆，我會從構造函數中爲處理函數排除處理函數的.bind（this）語句 – Phillip

只需使用hover狀態來確定樣式，而不是將其存儲在單獨的對象中。由於背景顏色取決於狀態，不將其存儲在組件外，配合其與三元運算符聲明：

<Segment style={{ 
    backgroundColor: this.state.hover ? 'red' : 'blue' 
}} />

如果你有其他的風格，只要使用傳播語法：

<Segment style={{ 
    ...styleObj, 
    backgroundColor: this.state.hover ? 'red' : 'blur' 
}} />

這將複製styleObj中已有的所有樣式，然後應用背景顏色。您可以在React JSX here中瞭解有關擴展語法的更多信息。

來源

2017-08-29 02:32:00 Li357

對於本文，我沒有包含此對象中所需的所有樣式。所以，如果有必要使用樣式對象，我將如何實現它？我的樣式對象具有更多的樣式而不僅僅是背景顏色變化 – Phillip

@PhillipR編輯。 – Li357

如何實現懸停效果而不直接改變樣式？

回答

相關問題