Компоненты компоновки React

Возможность передавать данные в ответ на различные компоненты легко достигается. Вы также можете создать несколько компонентов, просто скопировав компонент.

Как передать данные?

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Отсюда мы можем использовать этот компонент так:

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

Каждый приветственный компонент создает свое собственное имя. Это может быть очень полезно при мышлении в более сложных терминах.

Скажем, например, у нас есть некоторые данные, которые мы хотим отобразить, мы можем создать функцию, используя свойства, и поместить данные в JSX.

Как?

function Card(props) {
  return (
        <div className = 'card'>
            <h3>{props.title}</h3>
           <img src={props.pic}/>
          <p> {props.desc}</p>
      </div>
  );
}
const comment = {
  title: 'react card',
  pic: 'https://images.unsplash.com/photo-1509750998673-6cea69b91e90?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=11afdc6faa7b495f4d840597e5756bd0',
  desc: 'using props and objects to pass data down through the component.'
};
ReactDOM.render(<Card 
                  pic = {comment.pic}
                  title = {comment.title}
                  desc = {comment.desc}
                  /> , document.querySelector(".app"));
ReactDOM.render(<App />, document.querySelector(“.app”));

Мы видим, что создание компонента карты, готового для хранения данных, может быть обновлено с помощью реквизитов. С помощью реквизита мы можем передавать данные в компонент из объекта комментария.

Гораздо проще понять, увидев весь код, вот ссылка.