Reactjs 反应功能组件通信

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

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>
}

函数父函数（）{
const[var，setVar]=useState（）；
useffect（（）=>{
//叫做doSomething（）的东西
}，[var]）
返回
}
函数子（）{
const[data，setData]-useState（[]）；
doSomething（）{
获取（'/path/'）。然后（（resp）=>{
设置数据（相应数据）
}
}
返回儿童
}

这实际上是我第一次使用react，如果这是一个愚蠢的问题，那么很抱歉。我研究了一下，似乎上下文并不是这个案例的最佳选择，所以我想知道是否有一种更简单的方法来调用“doSomething（）”。谢谢

---

在我的应用程序中，我在两个位置使用子组件。这就是我想这样做的原因。

您也可以通过使用回调来实现这一点。将回调传递给子组件，然后将

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>
}

函数父函数（）{
const[var，setVar]=useState（）；
//包含子函数的状态
const[doSomething，setDoSomething]=useState（）
//回调以接收子函数
常量handleDoSomething=doSomething=>setDoSomething（doSomething）
useffect（（）=>{
doSomething（）
}，[var，doSomething]）
//将回调传递给Child
返回
}
函数子项（{getDoSomething}）{
doSomething（）{return“something”}
//将doSomething传递到回调中
getDoSomething（doSomething）
返回儿童
}

在子组件中执行

doSomething

的最简单方法是，如果传入影响函数执行的依赖值，即当

var

更改时，父组件执行函数

将

var

作为道具传递给子组件，并将效果从父组件移动到子组件

---

这意味着如果父组件中的某些内容发生变化（在本例中，

var

发生变化），子组件中的一个函数被执行。

要执行的函数会改变子组件上的某些内容吗？你能给出一个该函数的示例吗？我认为答案取决于这一点为什么你想从父组件调用该函数？我认为稍微增加一点上下文是合适的，因为现在你通常不会o类似于此。是的，“doSomething”函数将进行API调用，并以您设置它的方式在Child中设置变量，即使您调用

doSomething

，它也不会更改子视图。我建议您创建一个codesandbox示例。这非常有效，谢谢！