Question

我想知道是否可以将React 16的lazy，Suspense，createRef和forwardRef功能一起使用，以便将引用附加到动态导入的组件上。有谁知道这是否可能。我尝试遵循示例（https://github.com/facebook/react/pull/13446/commits/4295ad8e216e0747a22eac3eed73c66b153270d4#diff-e7eafbb41b012aba463f5a2f8fc00f65R1614），但是它似乎不适用于动态导入的组件。

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

//工作（不期望的实现） // Parent.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>
        );
    }

}

// Child.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（）的所需实现

// Parent.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>
        );
    }

}

// Child.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”方法较小，但是正如您所说的，您必须考虑道具碰撞。您链接的方法仍然正确。测试只是稍有变化：

更新：不确定以前是否是错误，但是现在懒惰会自动转发引用。只需确保导出一个可以容纳引用的组件即可。

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

可以使用React.Suspense和React.Lazy转发参考吗？

1 个答案: