React Ref undefined 即使在分配它之后答案

【问题标题】：React Ref undefined even after assigning itReact Ref undefined 即使在分配它之后
【发布时间】：2020-12-04 04:24:37
【问题描述】：

我有 3 个组件作为子组件具有“地图组件”。在所有三个组件中，我将 ref 分配给 Map 组件，但是当我尝试访问 ref.current 时，它返回未定义。这是三个组件之一：

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

【问题讨论】：

可以添加Map 代码吗？
@LefiTarik 我已经用地图组件编辑了问题
这不是你转发裁判的方式，请阅读文档。您的问题中还有太多不相关的代码，如果您需要进一步的帮助，请做一个最小的例子。
对不起，我使代码更精确地解决了问题。我不是要转发引用我只需要地图组件的引用

标签： javascript reactjs web ref

【解决方案1】：

此问题与未转发 ref 的 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！

【讨论】：