React函数组件和Class组件使用forwardRef传递ref
// 函数组件使用forwardRef传递ref const ForwardRefComponent = React.forwardRef((props, ref) => <div ref={ref.bind(this)} {...props}>子组件DOM</div>) export default function TestRef() { let myRef = null; return ( <> <button onClick={() => { console.info(myRef); }}>按钮</button> <ForwardRefComponent ref={(r) => (myRef = r)} /> </> ) } // Class组件使用forwardRef传递ref class Child extends React.Component { constructor(props) { super(props); } render() { return ( <div ref={this.props.forwardedRef}>这是子组件DOM</div> ) } } const wrapper = function (InnerComponent) { return React.forwardRef((props, ref) => { return ( <InnerComponent forwardedRef={ref} {...props} /> ) }) } const W = wrapper(Child) class Parent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ( <div> <button onClick={() => { console.info(this.myRef.current); }}>按钮</button> <W ref={this.myRef} { ...this.props}/> </div > ) } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步