如何将子项中的状态链接回父项，父项又充当子项并将值返回给其父项？答案

【问题标题】：How to chain the state in a child back to the parent which in turn acts as a child and returns the value to its parent?如何将子项中的状态链接回父项，父项又充当子项并将值返回给其父项？
【发布时间】：2020-05-14 07:51:44
【问题描述】：

所以我是新来的。所以我读了很多关于通过回调从孩子传回给父母的文章。

但我的问题是，例如，这是一个场景：

我有一个名为 Dashboard.js 的组件，它确实是一个父组件，其中有一个我想要更改的名为 height 的状态。现在有另一个名为 SideBar.js 的组件，我将这个状态作为道具传递，反过来，它将值传递给名为 SideBarContent.js 的组件。现在 SideBarContent.js 有一个名为 heightSideBar 的状态，它由这个道具填充，尽管这是不允许的。现在在 SideBarContent.js 中，我有一个按钮，它应该将这个状态 heightSideBar 增加 5 倍。现在这个状态值需要首先发送到 SideBar.js，然后最后发送到 Dashboard.js 以便我可以从那里更新我的 Dashboard.js 状态高度，可以相应地使用。

当存在父子函数链时，请帮助我解决此传递问题。

【问题讨论】：

欢迎来到 SO。没有看到一些代码很难理解流程，但唯一的是将父级中的height 乘以一个数字，您可以将回调一直向下传递，在设置因子后您可以调用它用这个因素回调并乘以高度。您可以根据需要更改逻辑，但重要的是数据将从顶部流向按钮，您将使用传递给子组件的回调更新父组件的状态。
您可以将回调传递到尽可能多的地方，但这是一个称为道具钻孔的过程，并且使用反应上下文系统具有最佳解决方案。 TL;DR 您可以为组件下方的 reactDOM 树提供值/回调，并且只有对它们感兴趣的组件才能使用它们，从而跳过道具钻探。
非常感谢。 ^__^ 先生下次提供代码。

标签： javascript reactjs parent

【解决方案1】：

一个非常简单的例子，你可以学习。 Child1 在这种情况下没用，但我知道你还有其他东西。此外，正如@Drew Reese 在他们的评论中提到的，这是道具钻孔。您可以通过使用其他选项来避免这种情况，但在学习的早期，我认为掌握支柱钻孔很重要。

function App() {
  const [height, setHeight] = React.useState(100);

  function multiplyHeight(factor) {
    setHeight(prev => prev * factor);
  }
  return (
    <div>
      <div>Height now: {height} </div>
      <Child1 height={height} multiplyHeight={multiplyHeight} />
    </div>
  );
}

function Child1({multiplyHeight }) {
  return <Child2 multiplyHeight={multiplyHeight} />
}

function Child2({ multiplyHeight}) {
  const [factor, setFactor] = React.useState(1);

  function handleChange(e) {
    setFactor(e.target.value);
  }

  function handleClick() {
    multiplyHeight(factor);
  }

  return (
    <div>
      <input type="number" onChange={handleChange} value={factor} />
      <button onClick={handleClick}>Go</button>
      </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

【讨论】：

谢谢..这真的很有帮助