物化选项卡不使用 React Router 工作

Question

我试图了解为什么在使用 react 路由器时 Materialize 选项卡不起作用。

导航栏上有 3 个选项可以打开各自的页面：“酒店”、“统计”和“学院”。 这些部分中的每一个都有标签。

在酒店内部，我有 3 个具体化选项卡：Gen Info、Staff、Content，在其他页面上我也有具体化选项卡。

当在 react 路由器之外使用时，它们可以完美地工作。这是代码：

class App extends Component {

render() {
return (
  <div className="App">
    <Navbar/>
    <div className="body-extranet">
      <Header/> 

      <Switch>
        <Route path="/hotels" render={() => (
          <PageHotel tab={"Hoteis"}/>
        )}>
        </Route>
        <Route path="/statistics/" render={() => (
          <PageStatistics tab={"Statistics"}/>
        )}>
        </Route>
        <Route path="/academy/" render={() => (
          <PageAcademy tab={"Academy"}/>
        )}>
        </Route>
      </Switch>
    </div>
  </div>
  );
 }
}

export default App;

在 PageHotel 组件内部，例如，我有物化选项卡

class PageHotel extends Component {

render() {
const { hotel, tab } = this.props;

return (
  <div className="page">
    <div className="subheader-tabs">
      <div class="row">
        <div class="col s12">
          <ul class="tabs">
            <li class="tab col"><a href="#info">General Info</a></li>
            <li class="tab col"><a href="#staff">Staff</a></li>
            <li class="tab col"><a href="#content">Content</a></li>
          </ul>
          <div className="divider"></div>
        </div>
        <div id="info" class="col s12">
          <div className="container">
            <Form></Form>
          </div>
        </div>
        <div id="staff" class="col s12">
            <Staff></Staff>
        </div>
        <div id="content" class="col s12">

        </div>
      </div>
    </div>
  </div>
);
}}

当我点击导航栏上的酒店时，物化选项卡甚至都没有启动，所有选项卡的内容都分布在一个页面上。我必须重新加载一次页面才能使其正常工作。

我尝试使用 react-materialize 并开始工作，但是，我遇到了其他问题。其中一个选项卡具有受控形式，一旦本地状态发生更改，它就会更新 redux 存储。但是，每当我在表单内写东西时，表单会重新加载，我无法写任何东西。

有人知道为什么会这样吗？

Answer 1

那是因为 de materialize-js 文件只是在页面加载时加载，而当您使用 react-routes 时，页面没有被加载，因此文件无法初始化它并且选项卡已损坏。你必须实现这样的东西：

Materialize-css With React, Initializing components using React Lifecycle method