reactjs - react Hook : Send data from child to parent component

Question

我正在寻找将数据从子组件传递到其父组件的最简单的解决方案。

我听说过使用 Context、传递槽属性或更新 props，但我不知道哪一个是最好的解决方案。

我正在构建一个管理界面，其中的 PageComponent 包含一个带有表格的 ChildComponent，我可以在其中选择多行。我想将我在 ChildComponent 中选择的行数发送到我的父 PageComponent。

类似的事情:

页面组件:

<div className="App">
  <EnhancedTable />         
  <h2>count 0</h2>
  (count should be updated from child)
</div>

子组件:

 const EnhancedTable = () => {
     const [count, setCount] = useState(0);
     return (
       <button onClick={() => setCount(count + 1)}>
          Click me {count}
       </button>
     )
  };

我确信这是一件非常简单的事情，我不想为此使用 redux。

Answer 1

针对这些情况的常用技术是 lift the state up到需要使用状态的所有组件的第一个共同祖先(即本例中的 PageComponent)，并将状态和状态更改函数作为 props 传递给子组件。

示例

const { useState } = React;

function PageComponent() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <ChildComponent onClick={increment} count={count} />         
      <h2>count {count}</h2>
      (count should be updated from child)
    </div>
  );
}

const ChildComponent = ({ onClick, count }) => {
  return (
    <button onClick={onClick}>
       Click me {count}
    </button>
  )
};

ReactDOM.render(<PageComponent />, 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"></div>