Question

我正在使用Context API在我的React Native项目中使用主题。为了使用主题上下文，我制作了一个高阶组件并将其作为道具传递给组件。

这对于大多数应用程序都很好。但是，当我开始使用引用时，它开始崩溃，因为根据文档，引用将不会自动转发，因此我们需要使用React.forwardRef API。但是当我的实现出现问题时，我无法解决它。

这是我一直在努力的代码：

// Higher order component, to wrap my component with theme (withTheme.js)
export const withTheme = (Component, areRefsUsed = false) => {
  // Logic to check if refs are being used
  if (areRefsUsed) {
    const ThemedComponent = (props, ref) => {
      return (
        <ThemeContext.Consumer>
          {theme => (<Component {...props} theme={theme} ref={ref} />)}
        </ThemeContext.Consumer>
      )
    };
    return React.forwardRef(ThemedComponent);
  }

  return (props) => {
    return (
      <ThemeContext.Consumer>
        {theme => <Component {...props} theme={theme} />}
      </ThemeContext.Consumer>
    )
  }
};

// My component where I am using refs (ExampleComponent.js)
class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.refForSomeComponent = React.createRef();
  }
  render() {
    const { theme } = this.props;
    return (
    <Fragment>
      <Text style={{color: theme.primaryColor}}>It is working</Text>
      <TextInput ref={this.refForSomeComponent} value={'Test'} />
    </Fragment>
   )
  }
}

export default withTheme(ExampleComponent, true);

当我尝试运行该应用程序时，会引发此错误：

The component for route 'ExampleComponent' must be a React component.

如何在React中的HOC中转发ref？

0 个答案: