反应功能组件通信

Question

我正在开发一个，当状态发生变化时，需要父组件调用子组件中的函数。就像这样：

function Parent() {
  const [var,setVar] = useState();
  
  useEffect(() => {
    //something to call doSomething()
  },[var])

  return <div> <Child /> </div>
}

function Child() {
   const [data,setData] - useState([]);
   doSomething() {
     fetch('/path/').then((resp) => {
       setData(resp.data)
     }
   }

   return <div> Child </div>
}

如果这是一个愚蠢的问题，这实际上是我第一次使用react，非常抱歉。我查看了它，似乎上下文不是最好的例子，所以我想知道是否有一种更简单的方法来调用"doSomething()“。谢谢。

在我的应用程序中，我在两个地方使用这个孩子。所以我才想这么做。

Answer 1

在子组件中执行doSomething的最简单方法是，如果传入影响函数执行的依赖值，即父组件在var更改时执行函数。

将var作为支柱传递给您的子组件，并将效果从父组件移到子组件。

这意味着如果父组件中的某些内容发生更改(在本例中为var更改)，则执行子组件中的一个函数。

Answer 2

您也可以通过使用回调来做到这一点。将回调传递给子组件，然后将doSomething传递给所述回调。然后，您可以访问该函数。

function Parent() {
    const [var,setVar] = useState();

    // State to contain the child's function
    const [doSomething, setDoSomething] = useState()

    // Callback to receive the child's function
    const handleDoSomething = doSomething => setDoSomething(doSomething)

    useEffect(() => {
        doSomething()
    },[var, doSomething])

    // Pass the callback to Child
    return <div> <Child getDoSomething={ handleDoSomething } /> </div>
}

function Child({ getDoSomething }) {
    doSomething() {return "something"}

    // Pass doSomething into the callback
    getDoSomething(doSomething)

    return <div> Child </div>
}