Необходимо передать данные из одного дочернего компонента в другой. ReactJS

Рейтинг: -1Ответов: 1Опубликовано: 15.02.2023

Недавно изучаю ReactJS и столкнулся с проблемой, необходимо взять данные из одного функционального компонента и передать в другой. Полагаю, что необходимо использовать родительский компонент, как посредника, но не уверен каким образом. Прошу подсказать как реализовать это с помощью пропсов. Возможно проще сделать через Redux, но в данном случае необходимо через пропсы.

Родительский компонент:

const Page: React.FC = () => {
 return (<div>
  <Part1 />
  <Part2 />
 </div>)
}

Соответственно необходимо передать из Part1 в Part2 массив.

Part1:

 const Part1: React.FC = () => {
     return (<div>
      smf
     </div>)
    }

Part2:

 const Part2: React.FC = () => {
     return (<div>
      smf
     </div>)
    }
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Вот пример, как это делается через пропсы

const Page = () => {
  const [id, setId] = useState(0)
  return (<div>
   <Part1 value={id} />
   <Part2 click={setId} />
  </div>)
 }

 const Part1 = (props) => {
  return (<div>
   {props.value}
  </div>)
 }

const Part2 = (props) => {
  return (<div>
   <button onClick={() => props.click(i => ++i)}>UP</button>
  </div>)
 }

Создается состояние у родительского компонента. В дочерние компоненты пропсами передаются значения состояния.

В первый само значение, во второй фукнцию, которая меняет состояние в родительском компоненте