如何防止突出显示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进一步阅读。