reactjs - 有没有办法使用 React State 更改视图？

Question

很长时间以来，我一直在努力解决这个问题，但似乎找不到解决方案。

在某些情况下，我正在处理的项目不能使用 React-Router on Rails，但我听说有一种方法可以使用 State Method 在组件之间切换。这是真的吗？

在这个 Ruby on Rails 应用程序中，我们使用一个父组件，其中包含许多 const 组件。问题是，我有三个用户需要单击的按钮，当它单击时，内容块必须更改。

有任何想法吗？

Answer 1

当然，这不是最优的，但我肯定会调查为什么你不能使用 React 路由器。尝试打开另一个问题并解决该问题。

import HomeComponent from 'home-component';
import AboutComponent from 'about-component';

const ROUTES = {
  home: HomeComponent,
  about: AboutComponent
};

class MainComponent extends Component {
  state = { component: HomeComponent }

  changeRoute = (routeName) => {
    this.setState({ component: ROUTES[routeName] || HomeComponent });
  }

  render() {
     const { component } = this.state;

     return (
       <div>
         <button onClick={() => changeRoute('home')}>Home</button>
         <button onClick={() => changeRoute('about')}>About</button>
         { component }
       </div>
     );
  }
}

这不是一个好方法，很明显，复杂性会迅速增加，但它可能适用于小型应用程序。