在React JS中切换组件

Question

我正在做一个单页应用程序，并且想切换一个组件。

这是一张图片，看起来像：

如果单击组件3中的按钮，则将组件3切换为5。所以也许就像组件3是所有项目的视图一样，如果单击一个项目，则将看到该项目的详细视图，其中包含一些信息。 为此，我创建了两个不同的组件。 所有其他组件应放在同一位置。

这是我的代码，我如何切换组件：

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

我不确定这样做是否正确。 另外，对于组件3和5，我有两个不同的css文件。如果切换两个组件，我的css会有类名的烦恼。

如果这是使用路由器的更好方法？ 反应方式如何？

谢谢你的帮助 ：）

Answer 1

这完全取决于您的需求，如果您需要同时渲染component3和component5那么路由将无济于事。
如果只需要渲染其中一个，那么一条路线就很方便。
至于语法我更喜欢这样：
this.state.detailVisible && <ProjectDetailView/>

这是一个简单的示例：

 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")); 

 <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>