reactjs 当操作由父组件启动时,从子组件向父组件检索数据的最佳方式

cwxwcias  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(112)

我知道使用回调函数在子节点和父节点之间传递数据,但我的问题是:从父节点启动回调触发器的最佳方法?.如果需要多次检索数据,则在再次打开触发器之前需要关闭触发器,则传递布尔属性以打开触发器似乎不是最佳方法,对吗?有更好的方法吗?
假设将状态向上移动到父级是不可行的,可能是第三方组件或任何其他有效的原因不允许这样做。

//pseudo code showing attempt to initiate the callback invocation from parent, by pasing a prop to trigger the callback
    function Parent() {
       const postProcessData = (data:any)=>{
          console.debug(data)
       }
       // used to control when the callback will be invoked on the child side
       const [trigger, setTrigger] = useState<boolean>(false)

       return (<Child onReturnData={postProcessData} invokeCallback={trigger} />)
    }

    function Child({onReturnData:()=>any, trigger: boolean}) {
       //will be called only if trigger changes 
       useEffect(()=>{  
          if(trigger) 
             onReturnData(/*some calculated stuff*/)
       },[trigger])
    }
ldioqlga

ldioqlga1#

如果您需要以正确的方式从父组件触发子组件中的某个函数,请检查useImperativeHandle挂钩。
总结一下钩子的作用,你可以把一个ref从父组件传递到子组件,并使用useImperativeHandle给ref添加额外的属性,现在你可以通过访问ref对象在父组件中使用这些属性。

相关问题