如何防止在div中更改樣式對象？

Question

我收到以下錯誤：

警告： div傳遞了以前已被更改的樣式對象。 不推薦使用變異style 。 考慮事先克隆它。 檢查Tab的render 。 上一個樣式： {padding: "20px", display: "block"} 。 樣式已更改： {padding: "20px", display: "none"} 。

從我的React / JSX的render()方法中的這段代碼中：

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 。 相反，它將使新對象{}突變。 在MDN上進一步閱讀Object.assign 。