Javascript 如何在react中的同级组件之间共享数据？

我在

按钮点击时动态添加列表。换句话说，我有一个
文本字段
和
按钮
单击按钮，我正在添加
列表中的
输入文本

我的问题是我想在同级之间共享数据。因为我有两个同级组件
search
和
ListItems

我想发送
列表中的
项目
，以呈现列表

这是我的密码

import React，{useState}来自“React”；
导入“/styles.css”；
常量搜索=（）=>{
常量[状态，设置状态]=使用状态（“”）；
const[items，setItems]=useState（[]）；
const onChangeHandler=e=>{
设置状态（如目标值）；
};
常量附加项=（）=>{
setItems（[…项，状态]）；
设置状态（“”）；
};
返回(
添加
);
};
常量项=（{text}）=>{
返回(
{text}
);
};
常量ListItems=（{items}）=>{
返回(
{items&&items.map（（item，key）=>）}
);
};
导出默认函数App（）{
返回(
);
}
您需要在
应用程序
组件级别定义状态，然后将该列表传递给每个子组件。它看起来像这样：

export default function App() {
  const [items, setItems] = useState([]);
  return (
    <div className="App">
      <Search items={items} setItems={setItems} />
      <ListItems items={items} setItems={setItems} />
    </div>
  );
}

导出默认函数App（）{
const[items，setItems]=useState（[]）；
返回(
);
}

然后，您可以从
搜索
组件中删除
项的定义

如前所述，这通常被称为向上并通过道具传递

const Search=（{addItem}）=>{
const[input，setinput]=useState（“”）；
const onChangeHandler=e=>{
设置输入输出（如目标值）；
};
const handleAddItem=（）=>{
附加项（输入）；
设置输出（“”）；
};
返回(
添加
);
};
常量项=（{text}）=>(
{text}
);
常量ListItems=（{items}）=>(

{items.map（text=>(
))}

);
导出默认函数App（）{
const[items，setItems]=useState（[]）；
const addItem=text=>setItems（prevState=>[…prevState，text]）；
返回(
);
}

将状态提升并通过道具传递
export default function App() {
  const [items, setItems] = useState([]);
  return (
    <div className="App">
      <Search items={items} setItems={setItems} />
      <ListItems items={items} setItems={setItems} />
    </div>
  );
}