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