reactjs - 如何减少在 ReactJS 上一次只显示一个的重复组件？

Question

从这里可以看出，有多个面板，但一次只能扩展一个面板，但是<Content />安装了多次，有没有办法<Content />在这些多个面板中只使用一个？

标签： reactjs

Answer 1

您可以使用条件渲染来避免多次安装<Content /> 组件。你的渲染应该是这样的：

render() {
const { expanded } = this.state;
return (
  <div className="App">
    {["panel 1", "panel 2", "panel 3", "panel 4", "panel 5", "panel 6"].map(
      panel => (
        <ExpansionPanel
          expanded={expanded === panel}
          onChange={this.handleChange(panel)}
        >
          <ExpansionPanelSummary>{panel}</ExpansionPanelSummary>
          <ExpansionPanelDetails>
            {expanded === panel ? <Content from={panel} /> : null}
          </ExpansionPanelDetails>
        </ExpansionPanel>
      )
    )}
  </div>
);
}

仅在需要时使用条件expanded===panel进行安装。

这是工作示例：https ://codesandbox.io/s/xr31llnypo