有没有办法通过父 HTMLDivElement 访问 React 组件返回的函数？

Question

我有一个自定义的React 组件Foo，它包含另一个自定义组件SubFoo，它又包含一个内联库组件<Bar/>。从Foo 我需要访问一个函数， BarFunc，由<Bar/>返回。不幸的是，<Bar/> 未设置为与refs 一起使用 - 当我尝试将ref 传递给<Bar/>（使用Foo 转发到SubFoo 使用React.forwardRef()）时，我得到@ 987654336@.

但是，在SubFoo 中有一个div 是<Bar/> 的父级，如果我将ref 传递给这个div，我会得到一个HTMLDivElement。

鉴于我的HTMLDivElement，有什么方法可以执行BarFunc？

Answer 1

有多种方法可以完成您想做的事情：

1. 修改SubFoo 以代理Bar 通过其render-prop 提供的行为。然后Foo 可以引用SubFoo 并间接调用行为：

   class SubFoo extends React.Component {
     barBehavior = () => this.barBehaviorFunc?.()
   
     renderProp = barApi => {
       this.barBehaviorFunc = barApi.barBehavior;
       return <div><other components={here} /></div>;
     }
   
     render() {
       return <Bar>{this.renderProp}</Bar>;
     }
   }
   
   class Foo extends React.Component {
     onClick() { this.ref?.barBehavior();
     render() {
       return <SubFoo ref={r => this.ref = r} />
     }
   }
   

2. 使用React.Context API 向上公开此行为（如果您在Foo 和SubFoo 之间有不可修改的代码）。

   const BarBehaviorContext = React.createContext(() => {});
   
   class Foo extends React.Component {
     setBarBehavior = barBehavior => this.barBehavior = barBehavior;
     render() { return <BarBehaviorContext.Provider value={this.setBarBehavior}><SubFoo /></BarBehaviorContext.Provider>;
   }
   
   class SubFoo extends React.Component {
     render() {
       return <BarBehaviorContext.Consumer>{setter => <Bar>{api => (setter(api.barBehavior), <div>...</div>)}</Bar>}</BarBehaviorContext.Consumer>
     }
   }