用子组件替换父组件

Question

我想在单击某个按钮时隐藏父组件的内容或 JSX，并显示子组件的 JSX。

有两个组件ABC 和XYZ。

期望的行为：当按钮被点击时，XYZ 组件应该呈现在与 className 侧边栏相同的 div 中，但组件 ABC 的 JSX 现在应该被隐藏。

目前，当我单击按钮时，XYZ 会呈现，而 ABC 仍然存在。

任何想法，我该如何实现？

class ABC extends React.Component {
  render() {
    <div className="sidebar">
     <h1>This is component ABC</h1>
    </div>
  }
}

class XYZ extends React.Component {
  render() {
    <div className="sidebar">
      <h1>Replaced by XYZ</h1>
    </div>
  }
}

Answer 1

您可以渲染<XYZ /> 或<ABC /> 取决于isClicked 标志。

以下代码展示了如何在特定条件下渲染每个子组件。

class Parent extends React.Component {
  state = { isClicked: false };
  render() {
    <div className="sidebar">
      { this.tate.isClicked ? <XYZ /> : <ABC /> }
    </div>
  }
}

那么你需要更新父组件中的isClicked标志。