React JS - визуализация независимых компонентов

Question

Я разрабатываю приложение с Rails и React JS. Мой проект не "чистая" отдельная страница (но я использую Rails в основном как API). Я решил разместить два независимых компонента React на разных страницах:

UPD:

(./ application. js)

........
ready(() => {
  ReactDOM.render(<FirstComponent />, document.getElementById('first'));
  ReactDOM.render(<AnotherComponent />, document.getElementById('another'));
});

(./ first_component_view. html .erb)

........
<div id="first">
</div>

(./ another_component_view. html .erb)

........
<div id="another">
</div>

FirstComponent и AnotherComponent являются независимыми. Это плохая практика - визуализировать компоненты, как я продемонстрировал? Может быть, есть другой (правильный) способ сделать это? Есть мысли?

Answer 1

Как вы представили, решение не будет работать так, как вы ожидаете.

Если вы действительно хотите отобразить более одного компонента, вы можете использовать <div> или React.Fragment для упаковки различных компонентов. Из документации для Фрагменты :

Обычный шаблон в React - компонент возвращает несколько элементов. Фрагменты позволяют группировать список детей без добавления дополнительных узлов в DOM.

Пожалуйста, найдите приведенный ниже пример для render:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

, который в вашем случае может быть следующим:

ReactDOM.render(<React.Fragment>
    <FirstComponent />
    <AnotherComponent />
</React.Fragment>, document.getElementById('root'));

Или с более короткой версией, что мне действительно нравится использовать <>components</>:

ReactDOM.render(<>
    <FirstComponent />
    <AnotherComponent />
</>, document.getElementById('root'));

Обновление:

Таким образом, из раздела комментариев выяснилось, что вопрос OP заключается в том, как представлять различные виды на основе компонента навигации.

По моему мнению, если вы хотите отобразить другой компонент на основе выбранного элемента навигации, в том же тогда это должно быть отражено и в части URL. Исходя из этого, вы можете использовать, например, компонент высшего порядка <Router>.

Таким образом, вы можете создавать <Link> компоненты для элементов навигации. Затем для каждого вы можете создать <Route> внутри компонента <Router>.

Представляя пример для вашего сценария:

<Router>
  <Switch>
    <Route path="/first">
      <FirstComponent />
    </Route>
    <Route path="/another">
      <AnotherComponent />
    </Route>
  </Switch>
</Router>

Предлагаемые хорошие учебные материалы для создания вашего сайта с этим следующее: https://reacttraining.com/react-router/web/guides/quick-start

Надеюсь, это поможет!