Question

我有一个Wrapper组件，该组件将在子代周围添加一个div，并将ref作为渲染回调传递给它的子代。

但是，如果子代是具有useEffect的功能组件，则可以获取引用，但是对于类组件，则未定义引用。

您可以看到以下代码，console.log是类组件的undefined。

这是一个可行的示例https://codesandbox.io/s/busy-platform-4l8ch

Wrapper.js

const Wrapper = ({ children }) => {
  const wrapperRef = useRef();

  const getRef = useCallback(() => {
    return wrapperRef.current;
  }, []);

  const renderChildren = useMemo(
    () => () => {
      debugger;
      if (children instanceof Function) {
        return children({
          prop1: 1,
          prop2: 2,
          parentRef: wrapperRef,
          getParentRef: getRef
        });
      } else {
        return children;
      }
    },
    []
  );

  return <div ref={wrapperRef}>{renderChildren()}</div>;
};

Inner1.js

const Inner = ({ prop1, prop2, getParentRef }) => {
  useEffect(() => {
    if (getParentRef) {
      console.log("ref in inner", getParentRef());
    }
  }, []);

  return (
    <div style={{ background: "green" }}>
      {prop1}
      {prop2}
    </div>
  );
};

Inner2.js

class Inner2 extends React.Component {
  componentDidMount() {
    console.log("ref in Inner2", this.props.getParentRef());
  }

  render() {
    return (
      <div style={{ background: "yellow" }}>
        {this.props.prop1}
        {this.props.prop2}
      </div>
    );
  }
}

app.js

<Wrapper>
        {({ prop1, prop2, parentRef, getParentRef }) => {
          return (
            <React.Fragment>
              <Inner
                prop1={prop1}
                prop2={prop2}
                parentRef={parentRef.current}
                getParentRef={getParentRef}
              />
              <Inner2
                prop1={prop1}
                prop2={prop2}
                parentRef={parentRef.current}
                getParentRef={getParentRef}
              />
            </React.Fragment>
          );
        }}
      </Wrapper>

为什么useEffect没有deps和componentDidMount表现不同

0 个答案: