如何防止突出顯示div中的樣式對象？

Question

我收到以下錯誤：

Warning: div was passed a style object that has previously been mutated. Mutating style is deprecated. Consider cloning it beforehand. Check the render of Tab . Previous style: {padding: "20px", display: "block"} . Mutated style: {padding: "20px", display: "none"} .

從這個代碼在我render()方法反應，和/ JSX：

const clonedChildren = React.Children.map(this.props.children, (el, i) => { 
    let visibility = 'none'; 
    if (i === this.state.activeIndex) visibility = 'block'; 
    const newStyle = { display: visibility }; 
    const style = Object.assign(el.props.style, newStyle); 
    return React.cloneElement(el, { style }); 
}); 

爲什麼這個錯誤發生？我已經克隆了這個元素。我怎樣才能解決這個問題？

Answer 1

請勿變更您的el.props.style。目前，您正在使用Object.assign，並將其用作目標對象，並將其改爲el.props.style。相反，使用Object.assign並使用一個新的對象作爲目標：

const style = Object.assign({}, el.props.style, newStyle); 

這不會發生變異el.props.style。它會改變新對象{}。在Object.assign上MDN進一步閱讀。