【React】反向父组件向调用子组件方法，利用useEffect实现

先给出网上常规方法，父组件向子组件传值：

import { useOutletContext } from 'react-router-dom';

const [value,setValue] = useState([]);

function App() {
    return(
        <div className="content"><Child context={{ value }} /></div>
    )
}

function Child() {
    const { value,setValue } = useOutletContext();
    return(
        <div>{ value }</div>
    )
}

此处我们就可以在Child中调用App的value，但若是反过来，希望父组件调用子组件的方法，网上并没有特别合适的方法，以下给出一个解决：

import { useOutletContext } from 'react-router-dom';

const [value,setValue] = useState([]);

function App() {
    return(
        <div className="content"><Child context={{ value }} /></div>
    )
}

function Child() {
    const { value,setValue } = useOutletContext();
    useEffect(() => {
      // 避免多次call
      function valueChange(){
        console.log("The value is changed")
        // 在此调用所需方法
      }
      valueChange();
      // dependencies要包含value，避免无限循环
    },[value])
    return(
        <div>{ value }</div>
    )
}

 原理很简单，useEffect在组件刷新时会被call，限定好call的条件（设置dependencies），在App组件的value值发生改变时，此时就会call起所需方法。