Как отправить значение состояния компоненту на том же уровне, что и в React?

Question

У меня есть структура таких компонентов:

• SeleccionadorEmpresa
• Диаграмма
• Nombres

Все эти компоненты находятся внутри основного компонента приложения. Я хочу отправить значение состояния из SeleccionadorEmpresa в Nombres, но Nombres не является дочерним элементом SeleccionadorEmpresa, они являются компонентами на одном уровне. Как я могу отправить значение состояния в качестве реквизита из SeleccionadorEmpresa в Nombres?

Answer 1

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

Answer 2

React - это все, что касается данных, проходящих по дереву компонента, поэтому горизонтальный поток данных является антишаблоном.Если вам нужно разделить состояние между двумя или более братьями и сестрами, решение будет поднять ваше состояние до .Что это значит?Вы должны передать свое состояние родительскому компоненту, который обернет всех братьев и сестер, теперь из вашей обертки просто распространите свои данные через реквизит.

Answer 3

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

https://reactjs.org/docs/lifting-state-up.html

<code>import React, { useState } from 'react';

function App(props) {
  const [nombres, setNombres] = useState("nombres");
  return (
    <SeleccionadorEmpresa nombres={nombres} setNombres={setNombres} />
    <Nombres nombres={nombres} />
  );
}

function SeleccionadorEmpresa({ nombres, setNombres }) {
  return (
    <button onClick={() => setNombres(`${nombres} nombres!`)}>
      click
    </button>
  );
}

function Nombres({ nombres }) {
  return (
    <pre>nombres: {nombres}

); }