Question

我具有这样的组件结构：

SeleccionadorEmpresa
图表
矮人

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

Answer 1

您应该在父类上同时控制两个状态，然后父类会将值发送给子类，在这种情况下为

Answer 2

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

Answer 3

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

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

如何在与React中的prop相同级别的组件上发送State值？

3 个答案: