reactjs - 可以使用 React.Suspense 和 React.Lazy 转发 ref 吗？

Question

我想知道是否可以结合使用 React 16 的惰性、Suspense、createRef 和 forwardRef 特性，以便将引用附加到动态导入的组件。有谁知道这是否可能。我尝试按照示例 ( https://github.com/facebook/react/pull/13446/commits/4295ad8e216e0747a22eac3eed73c66b153270d4#diff-e7eafbb41b012aba463f5a2f8fc00f65R1614 ) 进行操作，但它似乎不太适用于动态导入的组件。

通过在父组件中设置自定义 Prop ，将其传递给子组件，然后在子组件的渲染函数中将 ref 设置为该 Prop ，我已经能够获得类似的期望行为(下面的示例)。我对这种方法的唯一问题是它可能不是最干净的解决方案，并且可能很难在大型团队中保持实现的一致性。当尝试将 ref 放置在实际组件上时，它也会变得更容易。

//工作(不希望的实现)//父类.js

const LazyClass = lazy(() => { return import('./Child') };

class Parent extends React.Component {
    this.childRef = React.createRef();

    render() {
    return (
        <Suspense fallback={<div>Loading</div>}>
            <Child forwardRef={this.childRef} />
        </Suspense>
        );
    }

}

//子.js

class Child extends React.Component {

    render() {
        return (<div>I am the Child!</div>);
    }

}

export default React.forwardRef(({forwardRef, ...props}/*, ref*/) => 
    <Child {...props} ref={forwardRef} />
);

/////////////////////////////////////////////////////React.forwardRef() 的期望实现

//父类.js

const LazyClass = lazy(() => { return import('./Child') };

class Parent extends React.Component {


    this.childRef = React.createRef();

    render() {
        return (
            <Suspense fallback={<div>Loading</div>}>
                <Child ref={this.childRef} />
            </Suspense>
        );
    }

}

//子.js

class Child extends React.Component {

    render() {
        return (<div>I am the child</div>);
    }

}

export default React.forwardRef((props, ref) => 
    <Child { ...props } ref={ref} />
);

直接在延迟加载的组件上设置 ref 总是返回 null。如果它从 React.createRef() 返回值就好了。

Answer 1

“ref as a props”方法是一种较小的方法，但正如您所说，您必须考虑 Prop 碰撞。您链接的方法仍然正确。测试仅略有变化:

更新:不确定这是否是以前的错误，但 lazy 现在会自动转发 refs。只要确保您导出的组件可以包含引用即可。

实际操作: https://codesandbox.io/s/v8wmpvqnk0