Можно переслать реф, используя React.Suspense и React.Lazy? - PullRequest
Новая
       6

Можно переслать реф, используя React.Suspense и React.Lazy?

0 голосов
/ 23 января 2019

Интересно, можно ли было бы использовать ленивые, Suspense, createRef и forwardRef функции React 16 вместе, чтобы прикрепить ссылку на динамически импортируемый компонент. Кто-нибудь знает возможно ли это. Я попытался последовать примеру (https://github.com/facebook/react/pull/13446/commits/4295ad8e216e0747a22eac3eed73c66b153270d4#diff-e7eafbb41b012aba463f5a2f8fc00f65R1614),, однако, похоже, он не работает с динамически импортированными компонентами.

Мне удалось получить аналогичное желаемое поведение, установив пользовательский реквизит в родительском компоненте, передав его дочернему компоненту, а затем установив ссылку на этот реквизит в дочерней функции рендеринга (пример ниже). Моя единственная проблема с этим подходом состоит в том, что он может быть не самым чистым решением, и может быть трудно поддерживать согласованность реализации в большой команде. Это также облегчит попытки размещения ссылки на фактический компонент.

// Работаем (Нежелательная реализация) // 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} />
);

Установка ссылки непосредственно на Lazily загруженный компонент всегда возвращает ноль. Было бы хорошо, если бы он возвращал значение из React.createRef ().

1 Ответ

0 голосов
/ 14 марта 2019

Подход "ref as a props" является меньшим, но, как вы сказали, вы должны учитывать коллизию опор. Подход, который вы связали, все еще верен. Тест только немного изменился:

Обновление: Не уверен, если это было ошибкой ранее, но ленивый теперь перенаправляет ссылки автоматически. Просто убедитесь, что вы экспортируете компонент, который может содержать ссылку.

Смотрите в действии: https://codesandbox.io/s/v8wmpvqnk0

...