Javascript 如何在React.js中将replace Child设置为Parent？
我的父母是“Pd.jsx”，在此之前我有三个孩子。现在我想用一个子元素来代替它作为父元素，但这是一个使用geojson的映射。我想知道是否可以将map.jsx设置为父级，因此当我单击地图上的国家时，它将导致孩子的动作 非常感谢如果你能给我一些帮助，我现在真的很困惑。。。 这是我想作为父级更改的映射文件Javascript 如何在React.js中将replace Child设置为Parent？,javascript,reactjs,parent-child,geojson,react-leaflet,Javascript,Reactjs,Parent Child,Geojson,React Leaflet,我的父母是“Pd.jsx”，在此之前我有三个孩子。现在我想用一个子元素来代替它作为父元素，但这是一个使用geojson的映射。我想知道是否可以将map.jsx设置为父级，因此当我单击地图上的国家时，它将导致孩子的动作 非常感谢如果你能给我一些帮助，我现在真的很困惑。。。 这是我想作为父级更改的映射文件 import React, {Component, useRef, useEffect} from 'react'; import { Map, GeoJSON, Marker, Popup }
import React, {Component, useRef, useEffect} from 'react';
import { Map, GeoJSON, Marker, Popup } from 'react-leaflet';
import mapData from './../data/counties.json';
import {geolocated} from 'react-geolocated';
import 'leaflet/dist/leaflet.css';
import './MyMap.css'
import { layerGroup, geoJSON, popup } from 'leaflet';
import axios from 'axios';
const DEFAULT_LONGITUDE = 51.903614;
const DEFAULT_LATITUDE = -8.468399;
const mapstyle = {
height: '600px',
width: '500px',
background:0,
marginLeft: '50%',
marginTop: '3%',
};
const contystyle = {
fillColor:'darkgreen',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
class MyMap extends React.Component{
// highlight county
highLightCounty = (event) =>{
event.target.setStyle({
weight:5,
color:'white',
fillColor:'yellow',
fillOpacity:0.6
});
};
//resethighlight county style
resetCountyColor = (event) => {
event.target.setStyle({
fillColor:'darkgreen',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
});
};
// functions for features of the map
onEachCounty = (county, layer) => {
const countyName = county.properties.NAME_TAG;
console.log(countyName);
layer.bindPopup(countyName);
layer.on({
mouseover: this.highLightCounty,
mouseout: this.resetCountyColor,
click: this.selectThisCounty,
});
};
render() {
const longitude = this.props.coords ? this.props.coords.longitude : DEFAULT_LONGITUDE;
const latitude = this.props.coords ? this.props.coords.latitude : DEFAULT_LATITUDE;
return (
<div>
<h1>Mapping Parkinson's Disease in Ireland</h1>
<h4>UCC Parkinson's Disease Research Cluster</h4>
<h5>Last Update: 28th August 2020</h5>
<div className="sharebuttons">
<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com">
<img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" />
</a>
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<a href="https://plus.google.com/share?url=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
</a>
<a href="http://www.tumblr.com/share/link?url=https://simplesharebuttons.com&title=Simple Share Buttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/tumblr.png" alt="Tumblr" />
</a>
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
<Map style={mapstyle}
zoom = {6}
center={[latitude, longitude]}
maxZoom={10}
attributionControl={true}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.35}>
<GeoJSON
style={contystyle}
data = {mapData.features}
onEachFeature = {this.onEachCounty} />
{
!this.props.coords?
<div className="loading">Loading</div>
:
<Marker
url = {'./data/userlocation.png'}
position = {[latitude,longitude]}
>
<Popup>You are here!</Popup>
</Marker>
}
</Map>
</div>
);
}
}
export default geolocated({
positionOptions:{
enableHighAccuracy:false
},
userDecisionTimeout:10000
})(MyMap);
import React, { Component } from "react";
import Loading from './Loading';
import axios from 'axios';
import CountyTable from "./CountyTable";
import Age from './Age';
import Gender from './Gender';
import MyMap from './MyMap';
import '../index.css';
class Pd extends Component {
state = {
counties:[],
allCountyTotal:0,
service:[],
selectedCounties:[],
};
url = 'https://raw.githubusercontent.com/magluie/mappd/master/agegender.csv';
async componentDidMount () {
const response = await axios.get(this.url);
const rows = response.data.split("\n");
console.log(rows[0].split(","));
const counties = [];
const service = [];
let allCountyTotal = 0;
for( let i = 1; i < rows.length; i++) {
const row = rows[i].split(",");
const countyName = row[0];
const atwenty = Number(row[1]);
const athirty = Number(row[2]);
const afourty = Number(row[3]);
const afifty1 = Number(row[4]);
const afifty2 = Number(row[5]);
const asixty1 = Number(row[6]);
const asixty2 = Number(row[7]);
const aseventy1 = Number(row[8]);
const aseventy2 = Number(row[9]);
const aeighty1 = Number(row[10]);
const aeighty2 = Number(row[11]);
const malenum = Number(row[12]);
const femalenum = Number(row[13]);
const total = Number(row[14]);
const serviceName = row[15]
if(countyName !== "" && serviceName !== "") {
counties.push({
name:countyName,
total: total,
female: femalenum,
male: malenum,
twenty: atwenty,
thirty: athirty,
fourty: afourty,
fifty1: afifty1,
fifty2: afifty2,
sixty1: asixty1,
sixty2: asixty2,
seventy1:aseventy1,
seventy2: aseventy2,
eighty1: aeighty1,
eighty2:aeighty2,
service: serviceName,
});
}
allCountyTotal += total;
}
//make the loading show a bit so set the await time
await new Promise((s) => setTimeout(s,500));
this.setState({
counties:counties,
allCountyTotal:allCountyTotal,
service:service,
});
}
//https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
handleOnRowSelected =(countyToUpdate) =>{
const counties =[...this.state.counties];
const countyIndex = counties.findIndex(
(c) => c.name === countyToUpdate.name,
(c) => c.female === countyToUpdate.female,
(c) => c.male === countyToUpdate.male,
(c) => c.twenty=== countyToUpdate.twenty,
(c) => c.thirty === countyToUpdate.thirty,
(c) => c.fourty === countyToUpdate.fourty,
(c) => c.fifty1 === countyToUpdate.fifty1,
(c) => c.fifty2 === countyToUpdate.fifty2,
(c) => c.sixty1 === countyToUpdate.sixty1,
(c) => c.sixty2 === countyToUpdate.sixty2,
(c) => c.seventy1 === countyToUpdate.seventy1,
(c) => c.seventy2 === countyToUpdate.seventy2,
(c) => c.eighty1 === countyToUpdate.eighty1,
(c) => c.eighty2 === countyToUpdate.eighty2,
);
const county = {
name: countyToUpdate.name,
total: countyToUpdate.total,
service: countyToUpdate.service,
female: countyToUpdate.female,
male: countyToUpdate.male,
twenty: countyToUpdate.twenty,
thirty: countyToUpdate.thirty,
fourty: countyToUpdate.fourty,
fifty1: countyToUpdate.fifty1,
fifty2: countyToUpdate.fifty2,
sixty1: countyToUpdate.sixty1,
sixty2: countyToUpdate.sixty2,
seventy1:countyToUpdate.seventy1,
seventy2: countyToUpdate.seventy2,
eighty1: countyToUpdate.eighty1,
eighty2:countyToUpdate.eighty2,
//get the oppisit value
selected: !countyToUpdate.selected,
};
//replace the selected county inside the countyindex
counties[countyIndex] = county;
this.setState({counties, selectedCounties: counties.filter((c) =>c.selected),
});
};
sortByTotal =(countyA, countyB) =>{
if(countyB.total > countyA.total) return 1;
else if (countyB.total <countyA.total) return -1;
else return 0;
};
handleOnSortByTotal = (event) =>{
this.handleOnSort(event, this.sortByTotal);
};
sortByCountyName =(countyA, countyB) =>{
if(countyA.name > countyB.name) return 1;
else if (countyA.name <countyB.name) return -1;
else return 0;
};
handleOnSortByCountyName = (event) =>{
this.handleOnSort(event, this.sortByCountyName);
};
handleOnSort = (event,sortBy) =>{
event.preventDefault();
const counties = [...this.state.counties]
counties.sort(sortBy);
//the spread Operator included everthing in that array, by give [] dress it into a new array
//and sort it by function sorbytotal
this.setState({counties});
}
render() {
const { counties, allCountyTotal, service, selectedCounties}=this.state;
return (
<div>
{allCountyTotal === 0? <Loading /> :
<div>
<MyMap/>
{/* <h1 counties={selectedCounties} style={{textAlign:'left'}}>{this.counties} : {this.numberWithCommas(allCountyTotal)}</h1> */}
<div className='gender'>
<Gender counties={selectedCounties}/></div>
<div className='charts'>
<Age className = 'age' counties={selectedCounties} /></div>
<CountyTable
counties = {counties}
onSortByTotal = {this.handleOnSortByTotal}
onSortByCountyName = {this.handleOnSortByCountyName}
onRowSelected = {this.handleOnRowSelected}
/>
</div>
}
</div>
);
}
}
export default Pd;
import React，{Component，useRef，useffect}来自'React'；
从“反应传单”导入{Map，GeoJSON，Marker，Popup}；
从“/../data/countries.json”导入mapData；
从“react geolocated”导入{geolocated}；
输入“传单/目录/传单.css”；
导入“./MyMap.css”
从“传单”导入{layerGroup，geoJSON，popup}；
从“axios”导入axios；
常量默认经度=51.903614；
常量默认纬度=-8.468399；
常量映射样式={
高度：“600px”，
宽度：“500px”，
背景：0，
保证金金额：50%，
马金托普：“3%，
};
常数contystyle={
fillColor:'darkgreen'，
体重：2，
不透明度：1，
颜色：'白色'，
dashArray:'3'，
填充不透明度：0.7
}
类MyMap扩展了React.Component{
//重点县
highLightCounty=（事件）=>{
event.target.setStyle({
体重：5，
颜色：'白色'，
填充颜色：'黄色'，
填充不透明度：0.6
});
};
//突出县风
resetCountyColor=（事件）=>{
event.target.setStyle({
fillColor:'darkgreen'，
体重：2，
不透明度：1，
颜色：'白色'，
dashArray:'3'，
填充不透明度：0.7
});
};
//地图要素的功能
onEachCounty=（县，层）=>{
const countyName=county.properties.NAME_标记；
console.log（countyName）；
layer.bindPopup（countyName）；
分层({
老鼠娃：这是highLightCounty，
mouseout:这个，重置CountyColor，
单击：this.selectThisCounty，
});
};
render（）{
const longitude=this.props.coords？this.props.coords.longitude：默认经度；
const latitude=this.props.coords？this.props.coords.latitude：默认纬度；
返回(
绘制爱尔兰帕金森病地图
UCC帕金森病研究集群
最后更新：2020年8月28日
{
！这个，道具，库德？
加载
:
你来了！
}
);
}
}
导出默认地理位置({
位置选项：{
EnableHighAccurance:错误
},
userDecisionTimeout:10000
})（MyMap）；
import React, {Component, useRef, useEffect} from 'react';
import { Map, GeoJSON, Marker, Popup } from 'react-leaflet';
import mapData from './../data/counties.json';
import {geolocated} from 'react-geolocated';
import 'leaflet/dist/leaflet.css';
import './MyMap.css'
import { layerGroup, geoJSON, popup } from 'leaflet';
import axios from 'axios';
const DEFAULT_LONGITUDE = 51.903614;
const DEFAULT_LATITUDE = -8.468399;
const mapstyle = {
height: '600px',
width: '500px',
background:0,
marginLeft: '50%',
marginTop: '3%',
};
const contystyle = {
fillColor:'darkgreen',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
class MyMap extends React.Component{
// highlight county
highLightCounty = (event) =>{
event.target.setStyle({
weight:5,
color:'white',
fillColor:'yellow',
fillOpacity:0.6
});
};
//resethighlight county style
resetCountyColor = (event) => {
event.target.setStyle({
fillColor:'darkgreen',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
});
};
// functions for features of the map
onEachCounty = (county, layer) => {
const countyName = county.properties.NAME_TAG;
console.log(countyName);
layer.bindPopup(countyName);
layer.on({
mouseover: this.highLightCounty,
mouseout: this.resetCountyColor,
click: this.selectThisCounty,
});
};
render() {
const longitude = this.props.coords ? this.props.coords.longitude : DEFAULT_LONGITUDE;
const latitude = this.props.coords ? this.props.coords.latitude : DEFAULT_LATITUDE;
return (
<div>
<h1>Mapping Parkinson's Disease in Ireland</h1>
<h4>UCC Parkinson's Disease Research Cluster</h4>
<h5>Last Update: 28th August 2020</h5>
<div className="sharebuttons">
<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com">
<img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" />
</a>
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<a href="https://plus.google.com/share?url=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
</a>
<a href="http://www.tumblr.com/share/link?url=https://simplesharebuttons.com&title=Simple Share Buttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/tumblr.png" alt="Tumblr" />
</a>
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
<Map style={mapstyle}
zoom = {6}
center={[latitude, longitude]}
maxZoom={10}
attributionControl={true}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.35}>
<GeoJSON
style={contystyle}
data = {mapData.features}
onEachFeature = {this.onEachCounty} />
{
!this.props.coords?
<div className="loading">Loading</div>
:
<Marker
url = {'./data/userlocation.png'}
position = {[latitude,longitude]}
>
<Popup>You are here!</Popup>
</Marker>
}
</Map>
</div>
);
}
}
export default geolocated({
positionOptions:{
enableHighAccuracy:false
},
userDecisionTimeout:10000
})(MyMap);
import React, { Component } from "react";
import Loading from './Loading';
import axios from 'axios';
import CountyTable from "./CountyTable";
import Age from './Age';
import Gender from './Gender';
import MyMap from './MyMap';
import '../index.css';
class Pd extends Component {
state = {
counties:[],
allCountyTotal:0,
service:[],
selectedCounties:[],
};
url = 'https://raw.githubusercontent.com/magluie/mappd/master/agegender.csv';
async componentDidMount () {
const response = await axios.get(this.url);
const rows = response.data.split("\n");
console.log(rows[0].split(","));
const counties = [];
const service = [];
let allCountyTotal = 0;
for( let i = 1; i < rows.length; i++) {
const row = rows[i].split(",");
const countyName = row[0];
const atwenty = Number(row[1]);
const athirty = Number(row[2]);
const afourty = Number(row[3]);
const afifty1 = Number(row[4]);
const afifty2 = Number(row[5]);
const asixty1 = Number(row[6]);
const asixty2 = Number(row[7]);
const aseventy1 = Number(row[8]);
const aseventy2 = Number(row[9]);
const aeighty1 = Number(row[10]);
const aeighty2 = Number(row[11]);
const malenum = Number(row[12]);
const femalenum = Number(row[13]);
const total = Number(row[14]);
const serviceName = row[15]
if(countyName !== "" && serviceName !== "") {
counties.push({
name:countyName,
total: total,
female: femalenum,
male: malenum,
twenty: atwenty,
thirty: athirty,
fourty: afourty,
fifty1: afifty1,
fifty2: afifty2,
sixty1: asixty1,
sixty2: asixty2,
seventy1:aseventy1,
seventy2: aseventy2,
eighty1: aeighty1,
eighty2:aeighty2,
service: serviceName,
});
}
allCountyTotal += total;
}
//make the loading show a bit so set the await time
await new Promise((s) => setTimeout(s,500));
this.setState({
counties:counties,
allCountyTotal:allCountyTotal,
service:service,
});
}
//https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
handleOnRowSelected =(countyToUpdate) =>{
const counties =[...this.state.counties];
const countyIndex = counties.findIndex(
(c) => c.name === countyToUpdate.name,
(c) => c.female === countyToUpdate.female,
(c) => c.male === countyToUpdate.male,
(c) => c.twenty=== countyToUpdate.twenty,
(c) => c.thirty === countyToUpdate.thirty,
(c) => c.fourty === countyToUpdate.fourty,
(c) => c.fifty1 === countyToUpdate.fifty1,
(c) => c.fifty2 === countyToUpdate.fifty2,
(c) => c.sixty1 === countyToUpdate.sixty1,
(c) => c.sixty2 === countyToUpdate.sixty2,
(c) => c.seventy1 === countyToUpdate.seventy1,
(c) => c.seventy2 === countyToUpdate.seventy2,
(c) => c.eighty1 === countyToUpdate.eighty1,
(c) => c.eighty2 === countyToUpdate.eighty2,
);
const county = {
name: countyToUpdate.name,
total: countyToUpdate.total,
service: countyToUpdate.service,
female: countyToUpdate.female,
male: countyToUpdate.male,
twenty: countyToUpdate.twenty,
thirty: countyToUpdate.thirty,
fourty: countyToUpdate.fourty,
fifty1: countyToUpdate.fifty1,
fifty2: countyToUpdate.fifty2,
sixty1: countyToUpdate.sixty1,
sixty2: countyToUpdate.sixty2,
seventy1:countyToUpdate.seventy1,
seventy2: countyToUpdate.seventy2,
eighty1: countyToUpdate.eighty1,
eighty2:countyToUpdate.eighty2,
//get the oppisit value
selected: !countyToUpdate.selected,
};
//replace the selected county inside the countyindex
counties[countyIndex] = county;
this.setState({counties, selectedCounties: counties.filter((c) =>c.selected),
});
};
sortByTotal =(countyA, countyB) =>{
if(countyB.total > countyA.total) return 1;
else if (countyB.total <countyA.total) return -1;
else return 0;
};
handleOnSortByTotal = (event) =>{
this.handleOnSort(event, this.sortByTotal);
};
sortByCountyName =(countyA, countyB) =>{
if(countyA.name > countyB.name) return 1;
else if (countyA.name <countyB.name) return -1;
else return 0;
};
handleOnSortByCountyName = (event) =>{
this.handleOnSort(event, this.sortByCountyName);
};
handleOnSort = (event,sortBy) =>{
event.preventDefault();
const counties = [...this.state.counties]
counties.sort(sortBy);
//the spread Operator included everthing in that array, by give [] dress it into a new array
//and sort it by function sorbytotal
this.setState({counties});
}
render() {
const { counties, allCountyTotal, service, selectedCounties}=this.state;
return (
<div>
{allCountyTotal === 0? <Loading /> :
<div>
<MyMap/>
{/* <h1 counties={selectedCounties} style={{textAlign:'left'}}>{this.counties} : {this.numberWithCommas(allCountyTotal)}</h1> */}
<div className='gender'>
<Gender counties={selectedCounties}/></div>
<div className='charts'>
<Age className = 'age' counties={selectedCounties} /></div>
<CountyTable
counties = {counties}
onSortByTotal = {this.handleOnSortByTotal}
onSortByCountyName = {this.handleOnSortByCountyName}
onRowSelected = {this.handleOnRowSelected}
/>
</div>
}
</div>
);
}
}
export default Pd;
import React，{Component}来自“React”；
从“./Loading”导入加载；
从“axios”导入axios；
从“/CountyTable”导入CountyTable；
从“./Age”导入年龄；
从“./Gender”导入性别；
从“/MyMap”导入MyMap；
导入“../index.css”；
类Pd扩展组件{
状态={
县：[]，
allCountyTotal:0，
服务：[]，
选定县：[]，
};
url='1〕https://raw.githubusercontent.com/magluie/mappd/master/agegender.csv';
异步组件didmount（）{
const response=wait axios.get（this.url）；
常量行=response.data.split（“\n”）；
console.log（行[0]。拆分（“，”）；
康斯特县=[]；
常量服务=[]；
设allCountyTotal=0；
for（设i=1；isetTimeout（s，500））；
这是我的国家({
县:县,，
allCountyTotal:allCountyTotal，
服务:服务,，
});
}
//https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
带逗号的数字（x）{
返回x.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”；
};
handleOnRowSelected=（countyToUpdate）=>{