Question

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

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

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

类似的东西：

PageComponent：

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

ChildComponent：

 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）并传递状态和状态-将子组件的功能更改为道具。

示例

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>

Answer 2

您可以在父组件中创建一个方法，将其传递给子组件，并在每次子状态更改时从props调用它，并将状态保留在子组件中。

const EnhancedTable = ({ parentCallback }) => {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => {
            const newValue = count + 1;
            setCount(newValue);
            parentCallback(newValue);
        }}>
             Click me {count}
        </button>
    )
};

class PageComponent extends React.Component { 
    callback = (count) => {
        // do something with value in parent component, like save to state
    }

    render() {
        return (
            <div className="App">
                <EnhancedTable parentCallback={this.callback} />         
                <h2>count 0</h2>
                (count should be updated from child)
            </div>
        )
    }
}

Answer 3

要使事情变得非常简单，您实际上可以将状态设置器共享给子级，现在他们可以设置父级的状态了。

示例：假设有以下四个部分，

function App() {
  return (
    <div className="App">
      <GrandParent />
    </div>
  );
}

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  return (
    <>
      <div>{name}</div>
      <Parent setName={setName} />
    </>
  );
};

const Parent = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child setName={params.setName} />
    </>
  );
};

const Child = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};

祖父母组件具有实际状态，并且通过将setter方法（setName）与父子共享，他们可以访问以更改祖父母的状态。

您可以在下面的沙箱中找到工作代码， https://codesandbox.io/embed/async-fire-kl197

Answer 4

我不得不处理类似的问题，并找到了另一种方法，使用一个对象来引用不同函数之间以及同一文件中的状态。

import React, { useState } from "react";

let myState = {};

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  myState.name=name;
  myState.setName=setName;
  return (
    <>
      <div>{name}</div>
      <Parent />
    </>
  );
};
export default GrandParent;

const Parent = () => {
  return (
    <>
      <button onClick={() => myState.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child />
    </>
  );
};

const Child = () => {
  return (
    <>
      <button onClick={() => myState.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};

React Hook：将数据从子组件发送到父组件

4 个答案: