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

Question

我有这样的组件结构：

SeleccionadorEmpresa
图表
编号

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

Answer 1

您应该在父级 class 上控制两个状态，然后父级会将值发送给子级，在本例中为 a

Answer 2

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

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

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

Answer 3

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

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

How to send a State value to a component at the same level as a prop in React?

javascript

reactjs

react-props

react-component