如何在react中将函数转换为基于类的组件?

我正试图将基于函数的组件转换为基于类的组件。有人能指导我怎么做吗?下面是基于函数的组件:

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;

我得到的错误信息:

srccomponentsMap.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

一个类组件应该是这样的:

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类组件时需要注意的事项。

当访问道具时，通过this.props.propName访问。
访问状态变量时，通过this.state.stateVariableName访问。
在设置状态时，使用一个对象设置新的值，如:this.setState({stateVariableName: 'newValue' })，该对象将与现有的state合并。

不要忘记您还需要转换这部分代码:

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

它看起来像你正在使用一个效果，当组件挂载，卸载，这是一个很容易修复。只需将onmount代码移动到componentWillMount，将unmount代码移动到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;

你为什么又在做set state您已经在构造函数中设置了状态。

删除将起作用的设置状态行。请查看本文以了解更多关于基于类的组件的信息。https://medium.com/swlh/class -基础-组件- -反应- 440 - eb8ed85a0

相关内容

最新更新

热门标签：