react，从 const 组件子级设置父级的 const 组件变量

Question

我是新来的反应，我有一个问题，也许很简单，但我还无法弄清楚。

我有一个调用const组件子组件的const组件父组件，我想要的是将值从父组件传递给子组件，如果值在子组件中被编辑，父组件可以访问编辑后的值。

我想要的是这个，下面的const组件是子组件，它只是渲染一个地图，如果您单击它设置const selectedPotionwith经度和纬度，我希望const组件父组件传递经度和纬度的初始值，每次在子组件中编辑时，父组件都会获得该值：

    import React from 'react'
    import {MapContainer, Marker,TileLayer,Popup, useMapEvents } from 'react-leaflet'
    import 'leaflet/dist/leaflet.css'   
    
    
    const MapView = () =>{
    
        const [initialPosition, setInitialPosition] = React.useState([0,0]);
        const [selectedPosition, setSelectedPosition] = React.useState([0,0]);
    
    
       
        
        const Markers = () => {
        
            const map = useMapEvents({
                click(e) {                                
                    setSelectedPosition([
                        e.latlng.lat,
                        e.latlng.lng
                    ]);              
                },            
            })
        
            return (
                selectedPosition ? 
                    <Marker           
                    key={selectedPosition[0]}
                    position={selectedPosition}
                    interactive={false} 
                    />
                : null
            )   
            
        }
    
        
    
        return <MapContainer center={selectedPosition || initialPosition} zoom={5}   
                             
                style={{height:"200px",width:"500px"}}>
            <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
             ></TileLayer>
             <Markers />
        </MapContainer>
    }
    
    export default MapView

const组件父级如下所示：

    const Locations = () => {
    
    ....
    
    return (
      <MapView />
    )
    
    }

我怎样才能做到这一点？这是正确的做法吗？或者我应该使用类组件吗？谢谢！

Answer 1

您可以在父级中使用 useState 并将其传递给子级。

示例:

位置(父)

const Locations = () => {

const [myState, setMyState] = useState("something")

return (
  <MapView setMyState={setMyState}/>
)

地图视图（儿童）

   const MapView = ({setMyState}) => {

    
     const handleClick = () => {
       setMyState("something else")
     }
    
     return (
       <button onClick={handleClick> click </button>
     )
}

Answer 2

以一种反应方式，你应该把道具举到父母面前component.Hope这会很有帮助！

const MapView = ({selectedPosition,setSelectedPosition}) =>{

const Markers = () => {

    const map = useMapEvents({
        click(e) {                                
            setSelectedPosition([
                e.latlng.lat,
                e.latlng.lng
            ]);              
        },            
    })

    return (
        selectedPosition ? 
            <Marker           
            key={selectedPosition[0]}
            position={selectedPosition}
            interactive={false} 
            />
        : null
    )   
    
}



return <MapContainer center={selectedPosition} zoom={5}   
                     
        style={{height:"200px",width:"500px"}}>
    <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
     ></TileLayer>
     <Markers />
</MapContainer>

}

const Locations = () => {
const [selectedPosition, setSelectedPosition] = React.useState([0,0]);

return (
  <MapView selectedPosition={selectedPosition} setSelectedPosition={setSelectedPosition} />
)

}