反应js中的开关组件

Question

我正在进行单页应用，并希望切换组件。

以下是图片的样子：

如果我点击组件3中的按钮，我将用5切换组件3。 所以也许组件3是所有项目的视图，如果我点击一个项目，我将看到项目的详细视图，其中包含一些信息。 我为此创建了两个不同的组件。 所有其他组件应该保持在同一个地方。

以下是我如何切换组件的代码：

  this.state.detailVisible
      ? <ProjectDetailView/>
    : null

我不确定这是否是正确的反应方式。另外，对于组件3和组件5，我有两个不同的css文件。如果我正在切换这两个组件，我的css会有一些类名激怒。

如果是使用路由器的更好方法吗？ 如何做到这一点？

感谢您的帮助：）

Answer 1

这一切都取决于您的需求，如果您需要同时呈现component3和component5，那么路线将无法提供帮助。
如果你只需要渲染其中一个，那么一条路线可以很方便 至于语法，我更喜欢这个：
this.state.detailVisible && <ProjectDetailView/>

这是一个简单的例子：

＆＃13;

＆＃13;

const components = ["Component1", "Component2", "Component3"];

class Component extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showDetails: false
    };

    this.onComponentClicked = this.onComponentClicked.bind(this);
  }
  onComponentClicked(e) {
    this.setState({
      showDetails: !this.state.showDetails
    });
  }

  render() {
    const { name } = this.props;
    const { showDetails } = this.state;
    return (
      <div>
        <div>Component{name}</div>
        <button onClick={this.onComponentClicked}>Toggle Details</button>
        {showDetails && <ComponentDetails name={name} />}
      </div>
    );
  }
}

const ComponentDetails = ({ name }) => (
  <div>
    <div>Details of component{name}</div>
  </div>
);

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>Parent</h2>
        {components.map(c => {
          return (
            <div>
              <Component name={c} />
              <hr />
            </div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

＆＃13;

＆＃13;