Question

我得到了：

“无状态函数组件不能给出参考。尝试访问此引用将失败“。

使用MyContext.Provider简单包装我的组件时;

（react-native，以及reactjs 16.3.x）

新的Context API没有说，当Consuming组件也有一个ref时它不能被使用，但它需要使用函数来获取上下文值，因此在某种程度上引入了“无状态”组件，哪里没有（我的组件都没有无状态）。

有解决方法吗？

export const MyContext = React.createContext();


<MyContext.Provider  value={{'key':'val'}} >

  <MyContext.Consumer>

     {

         (contextVal)=> (
               <MyComponent  ref="find_me_later_22" globCx=contextVal>
          )

     }

  </MyContext.Consumer>

 </MyContext.Provider>

Answer 1

您需要转发您的参考 https://reactjs.org/docs/forwarding-refs.html

import React, {createContext} from 'react';
export const {Provider, Consumer} = createContext();

export const WithContext = (WrappedComponent) => {
    return React.forwardRef((props, ref) => (
        <Consumer>
            {(value) => (
                <WrappedComponent ref={ref} {...value} {...props}/>
            )}
        </Consumer>
    ))
}

React的新Context API和组件与ref

1 个答案: