3

我想知道是否可以同时使用 React 16 的惰性、Suspense、createRef 和 forwardRef 特性来附加对动态导入组件的引用。有谁知道这是否可能。我试图按照这个例子（https://github.com/facebook/react/pull/13446/commits/4295ad8e216e0747a22eac3eed73c66b153270d4#diff-e7eafbb41b012aba463f5a2f8fc00f65R1614），但它似乎不太适用于动态导入的组件。

通过在父组件中设置自定义道具，将其传递给子组件，然后在子组件的渲染函数中将 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() 实现所需的实现

//父.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() 的值，那就太好了。

4

1 回答 1

2

“作为道具的参考”方法是较小的方法，但正如你所说，你必须考虑道具碰撞。您链接的方法仍然正确。测试只是略有变化：

更新：不确定这是否是以前的错误，但现在懒惰会自动转发参考。只要确保你导出了一个可以保存 ref 的组件。

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

于 2019-03-14T11:41:55.843 回答