@75db77

Почему в React такая схема?

Код из документации React:
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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


Результат:
Hello, Sara
Hello, Cahal
Hello, Edite


Не могу понять почему в ReactDOM.render - написали<App />, а не<Welcome/>. Ведь имя Sara передают через {props.name} в функцию Welcome, а именно в строку: return <h1>Hello, {props.name}</h1>;, и уже соединившись в фунции Welcome становятся в конечном итоге Hello, Sara
А если написать в ReactDOM.render <App />как в примере, то по логике должно было выводиться на экран просто: Sara. Но почемо-то выводиться на экран Hello, Sara
Обьясните почему в React такая схема?
  • Вопрос задан
  • 219 просмотров
Решения вопроса 3
@EvgeniiR
https://github.com/EvgeniiR
Рендерится то что вернётся из функционального компонента App().
App() рендерит div внутри которого 3 раза рендерится то, что вернёт компонент Welcome(), который, в свою очередь, возвращает заголовок с приветствием.
Вот такой порядок. В чем проблема?

Если через ReactDOM отрендерить тег Welcome мы получим один заголовок с приветствием вместо трёх
Ответ написан
Два функциональных компонента первый - App выводит пачку вторых компонентов Welcome
Открой песочницу и сам попробуй написать https://codesandbox.io/s/
Ответ написан
hzzzzl
@hzzzzl
забудь что это "реакт", это просто "яваскрипт" (JSX)
https://ru.reactjs.org/docs/introducing-jsx.html

функция Welcome вызывается три раза и рисует на страницу то, что в нее задают
функция App вызывается один раз, и вызывает Welcome три раза с разным параметром name
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы