反应，从 const 组件子项设置父项的 const 组件变量答案

【问题标题】：react, set const component variable of a parent from a const component child反应，从 const 组件子项设置父项的 const 组件变量
【发布时间】：2021-04-06 05:47:00
【问题描述】：

我是新手，我有一个问题可能很简单，但我还想不通。

我有一个调用 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 />
    )
    
    }

我怎么能做到这一点？这是这样做的正确方法还是我应该使用类组件？谢谢！

【问题讨论】：

您可以在父级中保存位置状态和 useMapEvents() 函数，并将它们传递给子级以使用/调用。

标签： javascript reactjs react-native

【解决方案1】：

以一种反应的方式，您应该将道具提升到父组件。希望这会有所帮助！

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} />
)

}

【讨论】：

【解决方案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>
     )
}

【讨论】：