如何在React.js中将replace Child设置为Parent？

如何解决如何在React.js中将replace Child设置为Parent？

我有'Pd.jsx'作为父母，之前有三个孩子。现在，我想用一个孩子代替它作为父对象，但这是使用geojson的地图。我想知道是否可以将map.jsx设置为父对象，所以当我单击地图上的国家/地区时，它将导致孩子的行为。

非常感谢您能提供一些帮助，我现在真的很困惑... 这是我要作为父级更改的地图文件

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',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&amp;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&amp;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&amp;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&amp;text=Simple%20Share%20Buttons&amp;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;