如何在反應中將函式轉換為基于類的組件？-有解無憂

我正在嘗試將基于函式的組件轉換為基于類的組件。有人可以指導我如何做到這一點：這是基于函式的組件：

import React, { useEffect, useState } from "react"
import ReactMapGL, { Marker, Popup } from "react-map-gl"
import RsuMarker from './RsuMarker';
import mbStyle from '../styles/mb_style.json';

function Map(props) {
 const [viewport, setViewport] = useState({
latitude: 39.7392,
longitude: -104.9903,
width: 'calc(100% - 350px)',
height: '100vh',
zoom: 10
});

const [selectedRsu, setSelectedRsu] = useState(null);

const [selectedRsuCount, setSelectedRsuCount] = useState(null);

useEffect(() => {
const listener = e => {
  if (e.key === "Escape")
    setSelectedRsu(null);
};
window.addEventListener("keydown", listener);

return () => {
  window.removeEventListener("keydown", listener);
}
 }, []);

return (
  <div>
  <ReactMapGL 
    {...viewport} 
    mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
    mapStyle={mbStyle}
    onViewportChange={(viewport) => {
      setViewport(viewport);
    }}>

      {props.rsuData.map((rsu) => (
        <Marker 
          key={rsu.id} 
          latitude={rsu.geometry.coordinates[1]} 
          longitude={rsu.geometry.coordinates[0]}>

          <button 
            class="marker-btn" 
            onClick={(e) => {
            e.preventDefault();
            setSelectedRsu(rsu);
            if (props.rsuCounts.hasOwnProperty(rsu.properties.Ipv4Address))
              setSelectedRsuCount(props.rsuCounts[rsu.properties.Ipv4Address].count);
            else
              setSelectedRsuCount(0);
          }}>
            <RsuMarker onlineStatus={rsu.onlineStatus}/>
          </button>

        </Marker>
      ))}

      {selectedRsu ? (
        <Popup
          latitude={selectedRsu.geometry.coordinates[1]} 
          longitude={selectedRsu.geometry.coordinates[0]}
          onClose={() => {
            setSelectedRsu(null);
            setSelectedRsuCount(null);
          }}>

          <div>
            <h2 class="popop-h2">{selectedRsu.properties.Ipv4Address}</h2>
            <p class="popop-p">Online Status: {selectedRsu.onlineStatus}</p>
            <p class="popop-p">Milepost: {selectedRsu.properties.Milepost}</p>
            <p class="popop-p">
              Serial Number: {selectedRsu.properties.SerialNumber ? 
              selectedRsu.properties.SerialNumber : 'Unknown'}
            </p>
            <p class="popop-p">BSM Counts: {selectedRsuCount}</p>
          </div>

        </Popup>
      ) : null}
      
  </ReactMapGL>
</div>
);
}

 export default Map;

這是我到目前為止所做的。這并不多，但任何有關正確方向的指導，例如我需要在代碼中修復的事情，都將不勝感激。在這一點上非常失落。

     import React, { Component } from 'react';
     import ReactMapGL, { Marker, Popup } from "react-map-gl"
     import RsuMarker from './RsuMarker';
     import mbStyle from '../styles/mb_style.json';
     import {render} from 'react-dom';

     class Map extends Component {


    constructor(props) {
        super(props)
        this.state = {
            viewport: {
                latitude: 39.7392,
                longitude: -104.9903,
                width: 'calc(100% - 350px)',
                height: '100vh',
                zoom: 10
              },
              SelectedRsu : null,
              SelectedRsuCount : null,
        }

        this.setState({'viewport': viewport});
    render()
    {
        return (
            <div>
              <ReactMapGL 
                {...viewport} 
                mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
                mapStyle={mbStyle}
                onViewportChange={(viewport) => {
                  setViewport(this.viewport);
                }}>
        
                  {props.rsuData.map((rsu) => (
                    <Marker 
                      key={rsu.id} 
                      latitude={rsu.geometry.coordinates[1]} 
                      longitude={rsu.geometry.coordinates[0]}>
        
                      <button 
                        class="marker-btn" 
                        onClick={(e) => {
                        e.preventDefault();
                        setSelectedRsu(rsu);
                        if (props.rsuCounts.hasOwnProperty(rsu.properties.Ipv4Address))
                          setSelectedRsuCount(this.props.rsuCounts[rsu.properties.Ipv4Address].count);
                        else
                          setSelectedRsuCount(0);
                      }}>
                        <RsuMarker onlineStatus={rsu.onlineStatus}/>
                      </button>
        
                    </Marker>
                  ))}
        
                  {selectedRsu ? (
                    <Popup
                      latitude={selectedRsu.geometry.coordinates[1]} 
                      longitude={selectedRsu.geometry.coordinates[0]}
                      onClose={() => {
                        setSelectedRsu(null);
                        setSelectedRsuCount(null);
                      }}>
        
                      <div>
                        <h2 class="popop-h2">{selectedRsu.properties.Ipv4Address}</h2>
                        <p class="popop-p">Online Status: {selectedRsu.onlineStatus}</p>
                        <p class="popop-p">Milepost: {selectedRsu.properties.Milepost}</p>
                        <p class="popop-p">
                          Serial Number: {selectedRsu.properties.SerialNumber ? 
                          this.props.selectedRsu.properties.SerialNumber : 'Unknown'}
                        </p>
                        <p class="popop-p">BSM Counts: {selectedRsuCount}</p>
                      </div>
        
                    </Popup>
                  ) : null}
                  
              </ReactMapGL>
            </div>
          );
      
       }
     }

    }

    export default Map;

我收到的錯誤訊息：

     src\components\Map.js
     Line 24:36:  'viewport' is not defined             no-undef
      Line 25:5:   'render' is not defined               no-undef
     Line 30:21:  'viewport' is not defined             no-undef
     Line 34:19:  'setViewport' is not defined          no-undef
     Line 47:25:  'setSelectedRsu' is not defined       no-undef
     Line 49:27:  'setSelectedRsuCount' is not defined  no-undef
     Line 51:27:  'setSelectedRsuCount' is not defined  no-undef
     Line 59:20:  'selectedRsu' is not defined          no-undef
     Line 61:33:  'selectedRsu' is not defined          no-undef
     Line 62:34:  'selectedRsu' is not defined          no-undef
     Line 64:25:  'setSelectedRsu' is not defined       no-undef
     Line 65:25:  'setSelectedRsuCount' is not defined  no-undef
      Line 69:47:  'selectedRsu' is not defined          no-undef
      Line 70:60:  'selectedRsu' is not defined          no-undef
     Line 71:55:  'selectedRsu' is not defined          no-undef
     Line 73:43:  'selectedRsu' is not defined          no-undef
     Line 76:57:  'selectedRsuCount' is not defined     no-undef

uj5u.com熱心網友回復：

你為什么要再次設定狀態你已經在建構式中設定了狀態。

洗掉將起作用的設定狀態線。查看文章以了解有關基于類的組件的更多資訊。 https://medium.com/swlh/class-based-components-in-react-440eb8ed85a0

uj5u.com熱心網友回復：

類組件看起來像這樣。

import React, { Component } from "react";
import ReactMapGL, { Marker, Popup } from "react-map-gl";

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        latitude: 39.7392,
        longitude: -104.9903,
        width: "calc(100% - 350px)",
        height: "100vh",
        zoom: 10
      },
      selectedRsu: null,
      selectedRsuCount: null
    };
  }

  render() {
    const { viewport, selectedRsu, selectedRsuCount } = this.state;
    return (
      <div>
        <ReactMapGL
          {...viewport}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
          onViewportChange={(viewport) => {
            this.setState({ viewport });
          }}
        >
          {this.props.rsuData?.map((rsu) => (
            <Marker
              key={rsu.id}
              latitude={rsu.geometry.coordinates[1]}
              longitude={rsu.geometry.coordinates[0]}
            >
              <button
                class="marker-btn"
                onClick={(e) => {
                  e.preventDefault();
                  this.setState({
                    selectedRsu: rsu
                  });
                }}
              ></button>
            </Marker>
          ))}

          {selectedRsu ? (
            <Popup
              latitude={selectedRsu.geometry.coordinates[1]}
              longitude={selectedRsu.geometry.coordinates[0]}
              onClose={() => {
                this.setState({
                  selectedRsu: null,
                  selectedRsuCount: null
                });
              }}
            >
              <div>
                <h2 class="popop-h2">{selectedRsu.properties.Ipv4Address}</h2>
                <p class="popop-p">Online Status: {selectedRsu.onlineStatus}</p>
                <p class="popop-p">
                  Milepost: {selectedRsu.properties.Milepost}
                </p>
                <p class="popop-p">
                  Serial Number:{" "}
                  {selectedRsu.properties.SerialNumber
                    ? selectedRsu.properties.SerialNumber
                    : "Unknown"}
                </p>
                <p class="popop-p">BSM Counts: {selectedRsuCount}</p>
              </div>
            </Popup>
          ) : null}
        </ReactMapGL>
      </div>
    );
  }
}

export default Map;

使用 React Class 組件時需要注意的事項。

訪問 prop 時，通過this.props.propName.
訪問狀態變數時，通過this.state.stateVariableName.
設定狀態時，將其設定為具有新值的物件，例如： this.setState({stateVariableName: 'newValue' })，該物件將與現有的state.

uj5u.com熱心網友回復：

不要忘記，您還需要轉換這部分代碼：

useEffect(() => {
  const listener = e => {
    if (e.key === "Escape")
      setSelectedRsu(null);
  };
  window.addEventListener("keydown", listener);

  return () => {
    window.removeEventListener("keydown", listener);
  }
 }, []);

看起來您只是在組件安裝和卸載時使用效果，這是一個簡單的修復。只需將 onmount 代碼移動到componentWillMount和卸載代碼到componentWillUmount：

import React, { Component } from "react";
import ReactMapGL, { Marker, Popup } from "react-map-gl";

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        latitude: 39.7392,
        longitude: -104.9903,
        width: "calc(100% - 350px)",
        height: "100vh",
        zoom: 10
      },
      selectedRsu: null,
      selectedRsuCount: null
    };
  }
  //in order to be accessible to componentWillUnMount your listener has to be global
  listener = e => {
      if (e.key === "Escape")
      setState({selectedRsu:null});
     };
  componentDidMount(){
    window.addEventListener("keydown", this.listener);
  }
  componentWillUnmount(){
     window.removeEventListener("keydown", this.listener);
  }

  render() {
    const { viewport, selectedRsu, selectedRsuCount } = this.state;
    return (
      <div>
        <ReactMapGL
          {...viewport}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
          onViewportChange={(viewport) => {
            this.setState({ viewport });
          }}
        >
          {this.props.rsuData?.map((rsu) => (
            <Marker
              key={rsu.id}
              latitude={rsu.geometry.coordinates[1]}
              longitude={rsu.geometry.coordinates[0]}
            >
              <button
                class="marker-btn"
                onClick={(e) => {
                  e.preventDefault();
                  this.setState({
                    selectedRsu: rsu
                  });
                }}
              ></button>
            </Marker>
          ))}

          {selectedRsu ? (
            <Popup
              latitude={selectedRsu.geometry.coordinates[1]}
              longitude={selectedRsu.geometry.coordinates[0]}
              onClose={() => {
                this.setState({
                  selectedRsu: null,
                  selectedRsuCount: null
                });
              }}
            >
              <div>
                <h2 class="popop-h2">{selectedRsu.properties.Ipv4Address}</h2>
                <p class="popop-p">Online Status: {selectedRsu.onlineStatus}</p>
                <p class="popop-p">
                  Milepost: {selectedRsu.properties.Milepost}
                </p>
                <p class="popop-p">
                  Serial Number:{" "}
                  {selectedRsu.properties.SerialNumber
                    ? selectedRsu.properties.SerialNumber
                    : "Unknown"}
                </p>
                <p class="popop-p">BSM Counts: {selectedRsuCount}</p>
              </div>
            </Popup>
          ) : null}
        </ReactMapGL>
      </div>
    );
  }
}

export default Map;

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/334952.html

標籤：反应反应原生基于反应类的组件

上一篇：當MarkerClusterGroup是父元素時，如何更改ReactMarkerClusterGroup的選項？

下一篇：如何在ReactNative中使用StackNavigation在螢屏之間繼續播放視頻？