响应，从const组件子节点设置父级的const组件变量。

Question

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

我有一个const组件父级，它调用一个const组件子节点，我想要的是将值从父组件传递给子组件，如果这些值是在子元素中编辑的，则父组件可以访问已编辑的值。

我想要的是，下面的const组件是子组件，它只是呈现一个映射，如果单击它，设置带有经度和纬度的const selectedPosition，我希望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

以一种反应的方式，你应该把道具提升到父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} />
)

}

Answer 2

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

示例：

位置(父)

const Locations = () => {

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

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

MapView (儿童)

   const MapView = ({setMyState}) => {

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