如何防止在div中改变样式对象？

Question

我收到以下错误:

警告:div传递了之前已经变异的样式对象.变异style已被弃用.考虑事先克隆它.检查render的Tab.以前的风格:{padding: "20px", display: "block"}.变异风格:{padding: "20px", display: "none"}.

从我render()在React/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进一步阅读.