Frontend | Вопросы собесов

Как передать данные из родительского компонента в дочерний ?

Спросят с вероятностью 7%



Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.



Шаги для передачи данных из родительского компонента в дочерний



1️⃣Создание родительского компонента:

✅В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.

✅Затем передаем эти данные в дочерний компонент через пропсы.



2️⃣Приём данных в дочернем компоненте:

✅В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.



Рассмотрим пример, где родительский компонент передает строку message в дочерний компонент.



Родительский компонент (ParentComponent.js):

import React from 'react';

import ChildComponent from './ChildComponent';



function ParentComponent() {

    const message = "Привет, дочерний компонент!";

    

    return (

        <div>

            <h1>Родительский компонент</h1>

            <ChildComponent message={message} />

        </div>

    );

}



export default ParentComponent;

Дочерний компонент (ChildComponent.js):

import React from 'react';



function ChildComponent(props) {

    return (

        <div>

            <h2>Дочерний компонент</h2>

            <p>{props.message}</p>

        </div>

    );

}



export default ChildComponent;

Пояснение



1️⃣В родительском компоненте `ParentComponent`:

✅Создаем переменную message, содержащую строку "Привет, дочерний компонент!".

✅В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message.



2️⃣В дочернем компоненте ChildComponent:

✅Принимаем пропс message через параметр props.

✅Используем props.message для отображения переданной строки внутри тега <p>.



Дополнительные примеры



Родительский компонент (ParentComponent.js):

import React from 'react';

import ChildComponent from './ChildComponent';



function ParentComponent() {

    const user = {

        name: "Иван",

        age: 25

    };

    

    return (

        <div>

            <h1>Родительский компонент</h1>

            <ChildComponent user={user} />

        </div>

    );

}



export default ParentComponent;

Дочерний компонент (ChildComponent.js):

import React from 'react';



function ChildComponent(props) {

    return (

        <div>

            <h2>Дочерний компонент</h2>

            <p>Имя: {props.user.name}</p>

            <p>Возраст: {props.user.age}</p>

        </div>

    );

}



export default ChildComponent;

В React данные передаются из родительского компонента в дочерний с помощью пропсов. В родительском компоненте данные передаются дочернему компоненту через атрибуты JSX, а в дочернем компоненте эти данные принимаются и используются через объект props.



👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент



🔐 База собесов | 🔐 База тестовых