在 React 中的兄弟组件之间传递 usestate 数组

Question

我正在构建一个具有地图和侧边栏的应用程序。

每次用户在地图上单击时都会出现一个标记，并且坐标会存储在已使用的状态数组中。

每次出现新标记时，我都希望在我的侧边栏中将其显示为列表或手风琴项。

我的侧边栏组件和我的 addmarker 组件将 App 作为父组件。

如何在每次单击地图时将 usestate 数组从我的 addmarker 组件传递到我的侧边栏组件？

添加标记组件

function AddMarker(callbackFunction){
  const [coord, setPosition] = useState([]);



const map = useMapEvents({
    click: (e) => { 
       
        setPosition([...coord,e.latlng])
        const mark = e

        //console.log(mark)
        //setInfo(`${e.latlng}`)
        
     },

边栏组件

export default function VerticalTabs() {
const [value, setValue] = React.useState(0);

const handleChange = (event, newValue) => {
setValue(newValue);
};

return (
<Box
  sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 224 }}
>
  <Tabs
    orientation="vertical"
    value={value}
    onChange={handleChange}
    aria-label="Vertical tabs"
    sx={{ borderRight: 1, borderColor: 'divider' }}
  >
    <Tab label="Waypoints" {...a11yProps(0)} />
    <Tab label="Sorting" {...a11yProps(1)} />
 
  </Tabs>
  <TabPanel value={value} index={0}>
   
  </TabPanel>
  <TabPanel value={value} index={1}>
    Sorting
  </TabPanel>

</Box>

 );
}

APP.JS

function App() {
    return (
      <div className="App" >
        
             <Sidetabs/>

            <MapContainer center={[40.44695, -345.23437]} zoom={3}>

           ..............
 
              <AddMarker />
            </MapContainer>
          
    </div>
      )
}

Answer 1

在这里，总是提升一个台阶，每次都有帮助，我把你的状态提升了，现在children都可以使用了，https://reactjs.org/docs/lifting-state-up.html 类似的实现可能是这样的，因为两个兄弟姐妹都只是 children 到 parent App

function App() {

    const [coord, setPosition] = useState([]);

    return (
      <div className="App" >
            <Sidetabs coord={coord} setPosition={setPosition}/>
            <MapContainer center={[40.44695, -345.23437]} zoom={3}>
            <AddMarker coord={coord} setPosition={setPosition}/>
            </MapContainer>
      </div>
      )
}

然后使用道具提取出来，

function AddMarker(props){
   const {coord, setPosition} = props;
}

在 React 中的兄弟组件之间传递 usestate 数组

Pass usestate array between sibling components in React

components

reactjs

use-state