Материализация вкладок не работает с помощью React Router - PullRequest
0 голосов
/ 30 ноября 2018

Я пытаюсь понять, почему вкладки Materialise не работают, когда я использую реагирующий маршрутизатор.

У меня есть 3 опции на панели навигации, которые открывают соответствующие страницы: «Отели», «Статистика»и "Академия".Внутри каждого из этих разделов есть вкладки.

Внутри отелей у меня есть 3 материализованных вкладки: Информация о генераторе, Персонал, Контент и на других страницах. У меня также есть материализованные вкладки.

Они отлично работаютпри использовании снаружи реагирует роутер.Это код:

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

Когда я нажимаю на отели на панели навигации, вкладка материализации даже не запускаетсяи содержимое всех вкладок распространяется на одной странице.Я должен перезагрузить страницу один раз, чтобы заставить ее работать должным образом.

Я попытался использовать response-materialize, и он начал работать, Однако я столкнулся с другой проблемой.Одна из этих вкладок имеет управляемую форму, которая обновляет избыточное хранилище после изменения локального состояния.Однако всякий раз, когда я пишу что-то внутри формы, она перезагружается, и я ничего не могу написать.

Кто-нибудь знает, почему это происходит?

1 Ответ

0 голосов
/ 10 мая 2019

Это потому, что файл de materialize-js просто загружается при загрузке страницы, и когда вы используете реакционные маршруты, страница не загружается, поэтому файл не может его инициализировать и вкладки не работают.вы должны реализовать что-то вроде этого:

Materialize-css с React, Инициализация компонентов с использованием метода жизненного цикла React

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...