Как получить доступ к элементу div обернутого компонента в HOC - PullRequest
Новая
       29

Как получить доступ к элементу div обернутого компонента в HOC

0 голосов
/ 11 марта 2020

Я пробовал много разных синтаксисов, но я не мог сделать эту работу. Я пытаюсь получить доступ к элементу div обернутого компонента внутри HO C, чтобы я мог использовать его для инициализации своего экземпляра карты Google, для которого в качестве первого параметра требуется узел HTML. Я не использую компоненты класса. Как я понимаю, мне нужно создать ref в дочернем компоненте и forwardRef в HO C. Но я также попытался сделать это наоборот, но не повезло. Мой текущий код выглядит так: 

const withMap = (OriginalComponent) => {
    const NewComponent = (props) => {
        scriptLoader("https://maps.googleapis.com/maps/api/js?key=?&libraries=geometry&")
       .then((res) => {
            console.log(res)
            const map = new window.google.maps.Map(forwardedRef.current, {
            center: {lat: parseFloat(54.9065), lng: parseFloat(25.3189)},
            zoom: 6
        })
       })
       .catch((err) => {
           console.log(err);
        })        
        return <OriginalComponent name="hello" />
    }
    //return NewComponent;
    return React.forwardRef((props, ref) => {
        return <NewComponent {...props} forwardedRef={ref} />;
      });
}

Завернутый компонент: 

const Map = (props) => {
    const mapRef = useRef();
    const { name } = props;
    useEffect(() => {
       console.log(mapRef)
    }) 
    return (
        <div>
            <div className="map" style={mapStyles} name={name} ref={mapRef} ></div>
        </div>
    );
}

const mapStyles = {
    height: 100 + "vh"
}

export default withMap(Map);

1 Ответ

2 голосов
/ 11 марта 2020

Хорошо, я понял это. Проблема заключалась в том, что я получал ссылки в своем HO C, тогда как я должен был сделать это в моем обернутом компоненте. React.forwardRef это немного вводящее в заблуждение имя, которое я бы сказал.

Так как в HO C NewComponent в основном относится к любому компоненту, который мы обертываем его с HO C, мы можем создать ссылку, используя useRef ловушку в этом новом возвращенном компоненте HO C и ссылаться на наш оригинальный компонент. Теперь, если мы не будем пересылать ссылку, она будет ссылаться на сам компонент, а не на div внутри компонента. Таким образом, внутри обернутого компонента Map.js нам нужно перехватить эту ссылку с помощью React.forwardRef(props, ref) и, наконец, установить для ссылки элемент div внутри оператора return <div className="map" style={mapStyles} name={name} ref={ref} ></div>.

Полный пример: 

const withMap = (OriginalComponent) => {
    const NewComponent = (props) => {
        const mapRef = useRef();
        scriptLoader("https://maps.googleapis.com/maps/api/js?key=?&libraries=geometry&")
       .then((res) => {
            console.log(res)
            const map = new window.google.maps.Map(mapRef.current, {
            center: {lat: parseFloat(54.9065), lng: parseFloat(25.3189)},
            zoom: 6
        })
       })
       .catch((err) => {
           console.log(err);
        })        
        return <OriginalComponent name="hello" ref={mapRef} />
    }
    return NewComponent;
}

Оригинальный упакованный компонент: 

const Map = React.forwardRef((props, ref) => {
    const { name } = props;
    useEffect(() => {
    }) 
    return (
        <div>
            <div className="map" style={mapStyles} name={name} ref={ref} ></div>
        </div>
    );
});
...