静态组件不会重新渲染setState

Question

我有这个不会重新渲染的静态内容组件

  static Content = ({ children, tabId, activeTab }) => {
    return tabId === activeTab ? children : ''
  }

使用React.cloneElement公开tabId和activeTab。

render() {
    return React.Children.map(this.props.children, child =>
      React.cloneElement(child, {
        handleTabClick: this.handleTabClick,
        tabId: this.props.id,
        activeTab: this.state.activeTab
      })
    );
  }

但是当我点击标签2标题时，我不知道为什么标签1内容不会隐藏。

以下是演示https://codesandbox.io/s/w2mxm3zjq5

Answer 1

由于您的Tab组件存储了该状态，当单击它时只有特定组件状态更新，因此另一个状态不会更改，您需要将状态提升到选项卡组件并且它将起作用。 / p>

{{1}}

<强> Working codepen