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

Question

嗨，所以我是新来的。因此，我读了很多有关通过回调从子代传回其父代的知识。

但是我的问题是例如以下情况：

我有一个名为Dashboard.js的组件，它确实是一个父组件，其中有一个要更改的高度状态。现在，还有另一个名为SideBar.js的组件，我在其中将该状态作为prop传递，然后将其值传递给一个名为SideBarContent.js的组件。现在SideBarContent.js具有一个称为heightSideBar的状态，该状态由该道具填充，尽管这是不允许的。现在在SideBarContent.js中，我有一个按钮，应该将这个状态heightSideBar增加5倍。现在，首先需要将此状态值发送到SideBar.js中，然后再发送到Dashboard.js中，以便从那里我可以更新我的Dashboard.js状态高度，可以相应地使用。如果有一系列的父子功能，请帮助我解决此问题。

Answer 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" />