Javascript 如何将状态值发送到与React中的道具处于同一级别的组件？

我有这样一个组件结构：

• 塞莱西奥多伦普雷萨酒店
• 图表
• 化名

---

所有这些组件都位于主应用程序组件内。我想将状态值从SeleccionadorEmpresa发送到Nombres，但Nombres不是SeleccionadorEmpresa的子元素，它们是同一级别的组件。如何将状态值作为道具从SeleccionadorEmpresa发送到Nombres？

您应该控制父类上的两个状态，然后父类将值发送给子类，在这种情况下，您应该控制父类上的两个状态，然后父类将值发送给子类，在这种情况下，应将状态提升到父组件。 然后关联的状态值和设置器可以作为道具传递

import React，{useState}来自“React”；
功能应用程序（道具）{
const[nombres，setNombres]=useState（“nombres”）；
返回(
);
}
函数selectionadrempresa（{nombres，setNombres}）{
返回(
setNombres（`${nombres}nombres！`）}>
点击
);
}
函数Nombres（{Nombres}）{
返回(
名称：{nombres}
);
}

您应该将状态提升到父组件。 然后关联的状态值和设置器可以作为道具传递

import React，{useState}来自“React”；
功能应用程序（道具）{
const[nombres，setNombres]=useState（“nombres”）；
返回(
);
}
函数selectionadrempresa（{nombres，setNombres}）{
返回(
setNombres（`${nombres}nombres！`）}>
点击
);
}
函数Nombres（{Nombres}）{
返回(
名称：{nombres}
);
}

React是关于沿着组件树向下流动的数据，这意味着水平数据流是反模式的。如果您需要在两个或多个兄弟姐妹之间共享状态，则解决方案是。这意味着什么？您应该将您的状态转移到一个父组件，该组件封装了所有的同级组件，现在从您的包装器中只需通过道具向下分发您的数据。

React是关于沿着组件树向下流动的数据，因此这意味着水平数据流是反模式的。如果您需要在两个或多个兄弟姐妹之间共享状态，则解决方案是。这意味着什么？您应该将您的状态传输到一个父组件，该组件封装了所有的同级，现在从包装器中只需通过道具向下分发数据即可。

您应该研究使用Redux进行全局状态管理。您应该研究使用Redux进行全局状态管理。例如，将值发送到包含其他组件的应用程序组件，然后将值发送到Nombres？Kind，在您的情况下，状态应保留在应用程序上，并将其作为道具传递给孩子们，如果您想从子级修改，可以将函数作为道具传递。我可以从子级组件修改应用程序的状态吗？是的，您应该在应用程序组件上创建一个函数，例如

handleStateX（）{this.setState（x:！this.state.x）}

，然后将此函数作为道具传递给您的子级例如，将值发送到包含其他组件的应用程序组件，然后将值发送到Nombres？Kind，在您的情况下，状态应保留在应用程序上，并将其作为道具传递给孩子们，如果要从子组件修改，可以将函数作为道具传递。我可以从子组件修改应用程序的状态吗？是的，您应该在应用程序组件上创建一个函数，例如

handleStateX（）{this.setState（x:！this.state.x）}

然后将此函数作为propAnd传递给您的孩子，例如，如果Nombre是基于类的组件，我如何调用Nombre变量？例如，如果Nombre是基于类的组件，我如何调用Nombre变量？

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}</pre>
  );
}