javascript - React Native 将 ref 传递给用 HOC 包装的功能组件

Question

我正在尝试将 ref 从父级传递给其子级。 child 是一个功能组件，所以我在做:

// Child
const Configuration = forwardRef((props, ref) => {
    const { colors } = useTheme();

    const fall = useRef(new Animated.Value(1)).current;

    return <></>
});

一切正常。但是当我尝试做的时候

export default withFirebase(Configuration);

问题出现了...

这是 HOC 组件:

import React from "react";

import { FirebaseContext } from "../Firebase/";

const withFirebase = (Component) => (props) => (
  <FirebaseContext.Consumer>
    {(firebase) => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

export default withFirebase;

关于如何将 ref 传递给包装在 HOC 上的功能组件有什么想法吗？

我试过这样做:

const Configuration = forwardRef((props, ref) => withFirebase(() => {
    const { colors } = useTheme();

    const fall = useRef(new Animated.Value(1)).current;

    return <></>
}));

export default Configuration;

但是没用。谢谢。

Answer 1

通过功能组件传递 props 的唯一方法是使用 React.forwardRef()。但是，如果您正在使用它，为什么会出现错误(我想是“功能组件不接受引用”)？

如果您不将组件包装在 HOC 中，一切都会很好，所以问题出在您的 HOC 上。

const withFirebase = (Component) => (props) => (
  <FirebaseContext.Consumer>
    {(firebase) => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

HOC 只是接收“WrappedComponent”以概括应用中常见情况的另一个组件。您已将其实现为功能组件，因此您可以完美地使用 React.forwardRef 使其接收引用。

就像这样:

const withFirebase = (Component) => React.forwardRef((props, ref) => (
  <FirebaseContext.Consumer>
    {(firebase) => <Component ref={ref} {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
));

但也许，您在不希望使用 ref 的组件中使用 HOC...在这种情况下，不要更改您的 HOC，只需将 ref 作为 prop 传递给功能组件即可。像这样:

const Configuration = withFirebase(function Configuration(props) {
  const { colors } = useTheme();

  const { inputRef } = props;

  const fall = useRef(new Animated.Value(1)).current;

  return <></>;
});


export default forwardRef((props, ref) => ( // <----- The magic
  <Configuration {...props} inputRef={ref} />
));

当您将 ref 作为 prop 传递时，您不能这样做:

export default forwardRef((props, ref) => ( // <----- The magic
  <Configuration {...props} ref={ref} />
));

因为“ref”属性被 React 保留，并且只期望 refs 作为值。

就这些。