@jaren
В React данные можно передавать между компонентами используя props или состояние.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Родительский компонент import React from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const name = 'John'; return ( <div> <ChildComponent name={name} /> </div> ); } //Дочерний компонент import React from 'react'; function ChildComponent(props) { return <p>Hello, {props.name}</p>; } |
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//Родительский компонент import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const [name, setName] = useState('John'); return ( <div> <ChildComponent name={name} setName={setName} /> </div> ); } //Дочерний компонент import React from 'react'; function ChildComponent(props) { function handleChange(e) { props.setName(e.target.value); } return ( <div> <p>Hello, {props.name}</p> <input type="text" value={props.name} onChange={handleChange} /> </div> ); } |
Здесь мы определяем состояние name
в компоненте-родителе ParentComponent
и передаем его значение и функцию setName
в дочерний компонент ChildComponent
. В дочернем компоненте мы отображаем значение name
и вводим его в поле ввода. При изменении значения в поле ввода вызывается функция handleChange
, которая изменяет состояние name
с помощью функции setName
.