物化選項卡無法在React Router中使用

Question

我試圖了解為什么我在使用React Router時Materialize選項卡不起作用。

我在導航欄上有3個選項，它們將打開各自的頁面：“酒店”，“統計信息”和“學院”。 這些部分中的每個部分都有選項卡。

在酒店內部，我有3個物化選項卡：Gen Info，Staff，Content，而在其他頁面上，我也有物化選項卡。

在外部React Router上使用時，它們可以完美工作。 這是代碼：

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 Component內部，例如，我具有實現選項卡

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

那是因為dematerialize-js文件只是在頁面加載時被加載，而當您使用react-routes時，頁面並未被加載，因此該文件無法對其進行初始化並且選項卡已損壞。 您必須實現以下內容：

Materialize-css使用React，使用React Lifecycle方法初始化組件