即使分配后也无法定义

问题描述

我有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！