时间戳

首页 > 解决方案 > 通过 ref 从父组件访问功能组件的方法

reactjs - 通过 ref 从父组件访问功能组件的方法

问题描述

有没有办法可以triggerFoo从父级访问子级中的方法？这是我到目前为止的代码：

import React, {createRef} from 'react'
import ReactDOM from 'react-dom'

    const Parent= () => {
      let myRef = createRef()

      return (
        <>
          <Test ref={(ref) => myRef = ref} />
          <button onClick={() => myRef.triggerFoo()}>Click Me</button>
        </>
      )
    }

    const Child = React.forwardRef((props, ref) => {
      const triggerFoo = () => console.log('Foo')

      return <div>Testing</div>
    })

单击该按钮当前不会触发任何操作。

我的代码中的一个条件是它必须在父组件中使用回调引用，因为这个问题是我试图解决的涉及第三方包的更大问题的一部分。

标签： reactjs

解决方案

更改了代码。

const Parent= () => {
  let myRef = createRef()
  const triggerFoo = () => console.log('Foo')
  return (
    <>
      <Child ref={myRef} triggerFoo={triggerFoo}>Click</Child>
    </>
  )
}

const Child = forwardRef((props, ref) => {
  return <button onClick={props.triggerFoo} ref={ref}>{props.children}</button>
})

推荐阅读