如何在 HOC 中访问包装组件的 div 元素答案

【问题标题】：How to access a div element of a wrapped component in HOC如何在 HOC 中访问包装组件的 div 元素
【发布时间】：2020-06-23 08:13:51
【问题描述】：

我尝试了许多不同的语法，但我无法完成这项工作。我正在尝试访问 HOC 内包装组件的 div 元素，以便我可以使用它来初始化我的谷歌地图实例，这需要一个 HTML 节点作为第一个参数。我没有使用类组件。据我了解，我需要在子组件中创建 ref 并在 HOC 中创建 forwardRef。但我也尝试以相反的方式做，但没有运气。我当前的代码如下所示：

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);

【问题讨论】：

标签： javascript reactjs higher-order-components react-ref

【解决方案1】：

好的，我想通了。问题是我在我的 HOC 中收到了 refs，而我应该在我的包装组件中这样做。 React.forwardRef 我会说这个名字有点误导人。

由于在 HOC 中 NewComponent 基本上是指我们用 HOC 包装它的任何组件，我们可以在这个 HOC 新返回的组件中使用 useRef 钩子创建一个引用并引用我们的 OriginalComponent。现在如果我们不转发 ref，它只会引用组件本身，而不是组件内的 div。所以在包装组件Map.js 中，我们需要使用React.forwardRef(props, ref) 捕获这个引用，最后将引用设置为返回语句<div className="map" style={mapStyles} name={name} ref={ref} ></div> 中的一个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>
    );
});

【讨论】：