Блог

Главная - Вопросы по программированию - Можем ли мы визуализировать элементы из нескольких файлов js в корневой узел в React JS?

Можем ли мы визуализировать элементы из нескольких файлов js в корневой узел в React JS?

#javascript #reactjs

Вопрос:

Я только начал изучать react JS .И поэтому я просто хотел знать, можем ли мы отображать элементы из нескольких файлов JS в корневом узле в React JS ? Если да, то как, а если нет, то почему?

Например, я пытался сделать это

В index.js

 
import React from 'react';

import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';

const x="one";
const y=<div><h2>Zero, {x}</h2><h1>{x=="one"?"two":"three"}</h1></div>
ReactDOM.render(y,document.getElementById('root'));

В one.js

 import react from 'react';
import React from 'react';
import  ReactDOM  from 'react-dom';

const a="def";
const b="abc {a}";

ReactDOM.render(b,document.getElementById('root'));

Но вывод в браузере был просто

Ноль, один два

Комментарии:

1. Все приложение React загружается путем его введения в узел dom. У вас может быть более 1 приложения React на странице. Вы должны пройти через их учебник, прежде чем что-либо еще, b/c многие концепции отличаются от манипуляций с ванильным js dom. reactjs.org/tutorial/tutorial.html

2. Кроме того, важно понимать, что то, что выглядит как html в React, НЕ является html. На самом деле это javascript в виде JSX. Это вызовет у вас всевозможные проблемы, пока вы этого не поймете.

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

Ответ №1:

Он index.js служит корневым файлом, в котором все компоненты сводятся к одному родительскому компоненту (обычно это тот App.js ), который затем вводится в реальный DOM. Хотя вы не можете отобразить несколько компонентов в корневом узле из-за того, как работает react, тем не менее, возможно отобразить несколько компонентов, расположенных рядом с корневым узлом. Это может быть достигнуто с помощью createPortal метода на ReactDOM объекте. Во-первых, создайте смежные узлы с корневыми узлами внутри index.html .

 <div id='root'></div>
<div id='adjacent'></div>  <!-- Adjacent node to the root node by the id adjacent -->

Добавьте компонент, который будет отображаться как соседний узел в корневом компоненте (обычно App.js ).

App.js

     export default function App(){
      return( 
    ReactDOM.createPortal(<ComponentToBeRenderedAdjacentToRootNode/>,document.getElementById('adjacent'));
    <ComponentToBeRenderedInRootNode/>
    )
    }

Когда вы запустите приложение и просмотрите веб-страницу, структура DOM будет выглядеть примерно так.
HTML браузера

 <html>
 <head>
  ...
 </head>
 <body>
   <div id='root'> Root component and it's children components rendered here</div>
   <div id='adjacent'> ComponentToBeRenderedAdjacentToRootNode and it's children components rendered here</div>
 </body>
</html>
Метки: