[英]How to access a div element of a wrapped component in HOC
我尝试了许多不同的语法,但我无法完成这项工作。 我正在尝试访问 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);
好的,我想通了。 问题是我在我的 HOC 中接收 refs,而我应该在我的包装组件中这样做。 我会说React.forwardRef
是一个有点误导的名字。
因为在 HOC 中NewComponent
基本上是指我们用 HOC 包装它的任何组件,我们可以在这个 HOC 新返回的组件中使用useRef
钩子创建一个引用并引用我们的 OriginalComponent。 现在,如果我们不转发 ref,它只会引用组件本身,而不是组件内部的 div。 所以在封装的组件Map.js
我们需要使用React.forwardRef(props, ref)
来捕获这个 ref,最后在 return 语句中将 ref 设置为一个 div 元素<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>
);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.