Javascript 反应上下文使用者如何访问使用者组件上的ref

我已经使用构建了一个更高阶的组件，我正在尝试找到一种方法来访问已包装子组件的引用（通过

ref（）

）

tl/dr:本质上我想从

消费者

到实际的组件

这里有一个具体的例子。

RootComponent

设置

CoolProvider

的值，该值假定在所有包装的子组件上公开。使用

withCool（）

包装子组件，以便它可以访问

props.cool

。（当然，在现实世界的例子中，一切都要复杂得多，并且有几十个组件。）

现在，不知道子组件是否已包装，我希望能够通过

ref（）

获得对它的引用，如

RootComponent

中所示，但不幸的是，包装的组件不再支持

ref（）

，因为它们是功能性的

查看此实时演示（）并检查web控制台。您将看到，只有非包装组件的回调才会触发

我的问题是：是否有办法将引用请求从

CoolConsumer

转发到实际组件，以便父组件可以访问其引用

const { Provider: CoolProvider, Consumer: CoolConsumer } = React.createContext();

const withCool = Component => props => (
  <CoolConsumer>
    {cool => <Component {...props} cool={cool} />}
  </CoolConsumer>
);

class ChildComponent extends React.Component {
  render() {
    return this.props.cool ? (
        <div>Isn't this cool?</div>
    ) : (
      <div>Not so cool!</div>
    );
  }
}

const CoolChildComponent = withCool(ChildComponent);

class RootComponent extends React.Component {
  render() {
    return (
        <CoolProvider value={true}>
        <ChildComponent ref={(c) => { console.log('Normal child ref', c); }}/>
        <CoolChildComponent ref={(c) => { console.log('Cool child ref', c); }}/>
      </CoolProvider>
    );
  }
}

ReactDOM.render(<RootComponent />, document.querySelector('#cool'));

const{Provider:CoolProvider，Consumer:CoolConsumer}=React.createContext（）；
const with cool=组件=>props=>(
{cool=>}
);
类ChildComponent扩展了React.Component{
render（）{
还这个。道具。酷(
这不是很酷吗？
) : (
不太酷！
);
}
}
const CoolChildComponent=withCool（ChildComponent）；
类RootComponent扩展了React.Component{
render（）{
返回(
{console.log（'normalchild ref'，c）；}/>
{console.log（'Cool child ref'，c）；}/>
);
}
}
ReactDOM.render（，document.querySelector（'#cool'）；

我想出来了！使用React的API，完全可以实现我想要的。唯一需要的改变是更换

const withCool = Component => props => (
  <CoolConsumer>
    {cool => <Component {...props} cool={cool} />}
  </CoolConsumer>
);

constwithcool=Component=>props=>(
{cool=>}
);

与

constwithcool=Component=>React.forwardRef（（道具，ref）=>(
{cool=>}
));

以下是修改后的现场演示：

---

打开dev控制台，您现在将看到2个控制台日志打印对普通和酷组件的引用

ref

就像

键一样，它不是道具

const { Provider: CoolProvider, Consumer: CoolConsumer } = React.createContext();

const withCool = Component => props => {
  const {myRef, ...rest} = props;
  return (
    <CoolConsumer>
      {cool => <Component ref={myRef} {...rest} cool={cool} />}
    </CoolConsumer>
  )
};

class ChildComponent extends React.Component {
  render() {
    return this.props.cool ? (
      <div>Isn't this cool?</div>
    ) : (
      <div>Not so cool!</div>
    );
  }
}

const CoolChildComponent = withCool(ChildComponent);

class RootComponent extends React.Component {
  render() {
    return (
      <CoolProvider value={true}>
        <ChildComponent ref={(c) => { console.log('Normal child ref', c); }}/>
        <CoolChildComponent myRef={(c) => { console.log('Cool child ref', c); }}/>
      </CoolProvider>
    );
  }
}

ReactDOM.render(<RootComponent />, document.querySelector('#cool'));

const{Provider:CoolProvider，Consumer:CoolConsumer}=React.createContext（）；
const with cool=组件=>props=>{
常量{myRef，…rest}=props；
返回(
{cool=>}
)
};
类ChildComponent扩展了React.Component{
render（）{
还这个。道具。酷(
这不是很酷吗？
) : (
不太酷！
);
}
}
const CoolChildComponent=withCool（ChildComponent）；
类RootComponent扩展了React.Component{
render（）{
返回(
{console.log（'normalchild ref'，c）；}/>
{console.log（'Cool child ref'，c）；}/>
);
}
}
ReactDOM.render（，document.querySelector（'#cool'）；
是的，我知道，但它没有回答我的问题。还有，你提到的
键是什么？@FLekschas你运行我的代码了吗？它很好用
key
是添加到数组中元素的内容。看，这可能有用，但这不是我想要的。在您的情况下，家长需要知道孩子是否被包装。家长不能像往常一样只使用
ref
。相反，它必须使用
myRef
或者我遗漏了什么？是的，我会，但在前两天内不可能
const { Provider: CoolProvider, Consumer: CoolConsumer } = React.createContext();

const withCool = Component => props => {
  const {myRef, ...rest} = props;
  return (
    <CoolConsumer>
      {cool => <Component ref={myRef} {...rest} cool={cool} />}
    </CoolConsumer>
  )
};

class ChildComponent extends React.Component {
  render() {
    return this.props.cool ? (
      <div>Isn't this cool?</div>
    ) : (
      <div>Not so cool!</div>
    );
  }
}

const CoolChildComponent = withCool(ChildComponent);

class RootComponent extends React.Component {
  render() {
    return (
      <CoolProvider value={true}>
        <ChildComponent ref={(c) => { console.log('Normal child ref', c); }}/>
        <CoolChildComponent myRef={(c) => { console.log('Cool child ref', c); }}/>
      </CoolProvider>
    );
  }
}

ReactDOM.render(<RootComponent />, document.querySelector('#cool'));