Question

我正在尝试将引用从父级传递给子级。孩子是一个功能组件，所以我在做：

// 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

传递带有功能组件的道具的唯一方法是使用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>
));

但是，也许，您在不希望使用引用的组件中使用HOC ...在这种情况下，请勿更改HOC，只需将ref作为道具传递给功能组件。像这样：

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作为道具传递时，您不能这样做：

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

因为属性“ ref”由React保留，并且只会将refs作为值。

仅此而已。

将本机传递引用反应到用HOC包装的功能组件

1 个答案: