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

Question

我正在构建一个包含地图和侧边选项卡的应用程序。

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

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

我的侧选项卡组件和我的addmarker 组件将应用程序作为父级。

每次点击地图时，如何将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

在这里，总是提升一步，每次都有帮助，我已经提升了你的状态，现在两个孩子都可以使用它，https://reactjs.org/docs/lifting-state-up.html 类似的实现可能是这样的， 因为两个兄弟姐妹都只是父 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>
      )
}

然后使用 props 提取出来，

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