如何解决即使分配后也无法定义
我有3个以“地图组件”作为子组件的组件。在所有三个组件中,我都将ref分配给Map组件,但是当我尝试访问ref.current时,它将返回undefined。这是三个组成部分之一:
FullMap.js:
import React,{ Component } from 'react';
import Map from '../Components/Map'
import './FullMap.css'
import parkIcon from '../pins/parkIcon.png'
import serviceIcon from '../pins/serviceIcon.png'
import shopIcon from '../pins/shopIcon.png'
import gpark from '../pins/gpark.png'
import gservice from '../pins/gservice.png'
import gshop from '../pins/gshop.png'
export default class FullMap extends Component{
constructor(props) {
super(props);
this.child = React.createRef();
}
componentDidMount(){
document.addEventListener('fullscreenchange',(event) => {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`);
} else {
this.setState({fullScreen: false})
}
});
}
render(){
return(
<div>
<div style={{height:'fit-content',padding:'25px',backgroundColor:'#2c3e40',color:'white'}}>
<div style={{display:'inline-block'}}>
<Map ref={this.child} canAddPoint={false} points={[]} place={this.state.place} dontShop={this.state.shop} dontPark={this.state.park} dontService={this.state.service} cngPark={this.park} cngService={this.service} cngShop={this.shop} changeStatePlace={this.stateClicked} stateClick={this.state.state} fullScreen={this.state.fullScreen} exitFull={this.exitFull}/>
<button className='btn draw-border' style={{color:'white',boxShadow:'inset 0 0 0 4px white',width:'140px',fontSize:'13px',margin:'auto',marginTop:'30px',marginBottom:'20px'}} onClick={()=>this.fullScreen()}>Full-screen мапа</button>
<p style={{display:'block',fontSize:'9px',textAlign:'center'}}>Full-screen опцијата не е подржана за мобилни телефони</p>
</div>
</div>
</div>
)
}
}
有一个全屏按钮,它从Map组件调用一个函数,但是即使分配了ref,它始终会引发错误:
<Map ref={this.child} .../>
Map.js:
import React,{ Component } from 'react';
import mapboxgl,{ Marker } from 'mapbox-gl'
import './site.css'
import 'mapbox-gl/dist/mapbox-gl.css'
import * as turf from '@turf/turf'
import firebase from 'firebase'
class Map extends Component{
constructor(props) {
super(props);
this.map = React.createRef();
this.mainMarker = React.createRef();
this.placeMarkers = React.createRef();
}
state={
markers: [],places: [],bikeLanes: []
}
requestFullScreen = ()=>{
const container = this.map.getContainer();
const rfs =
container.requestFullscreen ||
container.webkitRequestFullScreen ||
container.mozRequestFullScreen ||
container.msRequestFullscreen;
rfs.call(container);
}
addPoint = () =>{
const marker = new mapboxgl.Marker()
.setLngLat(this.map.getCenter())
.addTo(this.map);
const coords = [...this.props.points];
coords.push(this.map.getCenter())
this.props.updatePoints({points: coords})
const allMarkers = [...this.state.markers]
allMarkers.push(marker);
this.setState({markers: allMarkers})
}
render(){
if(!this.props.smol){
return(
<div className='mapDiv'>
<div ref={el => this.mapContainer = el} className="mapContainer">
{fullScreen}
</div>
</div>
)}else{
return(
<div className='mapDiv' style={{width:'100%',height: '300px'}}>
<div ref={el => this.mapContainer = el} className="mapContainer">
{fullScreen}
</div>
</div>
)
}
}
}
export default withRouter(Map);
解决方法
此问题与没有转发参考的withRouter HOC
有关,您可以阅读有关here
这是此问题的解决方法:
const withRouterAndRef = (Wrapped) => {
const WithRouter = withRouter(({ forwardRef,...otherProps }) => (
<Wrapped ref={forwardRef} {...otherProps} />
));
const WithRouterAndRef = React.forwardRef((props,ref) => (
<WithRouter {...props} forwardRef={ref} />
));
const name = Wrapped.displayName || Wrapped.name;
WithRouterAndRef.displayName = `withRouterAndRef(${name})`;
return WithRouterAndRef;
};
export default withRouterAndRef(Map);
因此,您应该创建WithRouterAndRef
HOC并将其用于导出Map
!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。