Javascript 如何将状态从一个页面传递到另一个组件并返回到另一个页面？

有没有不使用Redux的方法，我可以从我的home.js页面（我使用的是钩子而不是类）设置/使用一个状态，将它传递给我的组件MyComponent.js，一旦在该组件内单击一个div，就会更新状态（对于home.js页面也是如此）

在home.js中，我有如下内容：

export default function Page({ session, items }) {

  const [selectedTab, setSelectedTab] = useState('main')
  const handleSelect = (e) => {
    setSelectedTab(e);
  }

  ... // then I return some react-bootstrap tabs, where Tab.Container is like:

   <Tab.Container id="tabs-home" activeKey={selectedTab} onSelect={(e) => handleSelect(e)}>

   ...
}

导出默认功能页（{session，items}）{
const[selectedTab，setSelectedTab]=useState（'main'）
const handleSelect=（e）=>{
设置选定的选项卡（e）；
}
…//然后返回一些react引导选项卡，其中Tab.Container类似于：
handleSelect（e）}>
...
}

在MyComponent.js中，我尝试了：

export default function MyComponent(props) {

  const [selectedTab, setSelectedTab] = useState()

  const handleClick = () => {
    setSelectedTab("second");
  }

  ... // and I return something like:

  <div onClick={() => handleClick()} style={{cursor: 'pointer'}}>blahblah</div>

导出默认函数MyComponent（道具）{
常量[selectedTab，setSelectedTab]=useState（）
常量handleClick=（）=>{
设置选定选项卡（“第二”）；
}
…//然后我返回如下内容：
handleClick（）}style={{cursor:'pointer'}}>blahblah

---

因此，基本上，当单击组件内的项目时，我需要更改页面中选定的选项卡。然后，我还需要将道具从组件传递回页面，但一旦我了解了如何传递状态，我想这也是同样的过程

这里有一个快速片段，演示了在父级中保持状态并将控制传递给子级的概念

const-App=（）=>{
const[state，setState]=React.useState（'main'）；
常数handleState=（e）=>{
console.clear（）；
console.log（如target）；
设置状态（如目标id）；
}
返回(
)
}
const Tab=（{id，state，handleState}）=>{
返回(
{id}
);
}
ReactDOM.render(
,
document.getElementById（“根”）
);
.active{
背景色：番茄；
}
下面是一个快速片段，演示了在父级中保持状态并将控制权传递给子级的概念


const-App=（）=>{
const[state，setState]=React.useState（'main'）；
常数handleState=（e）=>{
console.clear（）；
console.log（如target）；
设置状态（如目标id）；
}
返回(
)
}
const Tab=（{id，state，handleState}）=>{
返回(
{id}
);
}
ReactDOM.render(
,
document.getElementById（“根”）
);
.active{
背景色：番茄；
}

不要在子对象中设置状态，只需将
handleSelect（）
处理程序传递给子对象，作为一个propIt工作！我甚至不知道这是可能的。。通过这种方式，我想我可以创建另一个功能，并对我需要从组件传递回页面的一些道具执行相同的操作。我很高兴它有所帮助，它肯定会打开大门。你最终知道为什么它只在第一次单击时才起作用，因为我传递的道具有什么关系吗？它们被正确地记录下来，每个项目在单击时都会记录其道具，但似乎我传递处理程序的组件只在第一次接收状态。不要在子级中设置状态，只需将
handleSelect（）
处理程序传递给子级即可，因为它可以正常工作！我甚至不知道这是可能的。。通过这种方式，我想我可以创建另一个功能，并对我需要从组件传递回页面的一些道具执行相同的操作。我很高兴它有所帮助，它肯定会打开大门。你最终知道为什么它只在第一次单击时才起作用，因为我传递的道具有什么关系吗？它们被正确地记录下来，每个项目都会在单击时记录其道具，但似乎我传递处理程序的组件只在第一次收到状态，而不是包含可单击div的选项卡组件，它是MyComponent.js，它用可单击的项目填充我的侧栏，当我点击其中任何一个时，我希望以编程方式在home.js页面内切换选项卡，并根据单击的项目传递道具，以便动态填充选项卡内容。我想我需要Redux来处理这类东西，不管具体的成分是什么，理论都是正确的；在适当的父级保留状态和状态处理程序，并相应地将处理委托给子级（不能向上传递状态）。下面是一个使用内置
上下文的父/子示例
对不起，它不是包含可单击div的选项卡组件，而是MyComponent.js，它用可单击的项目填充我的侧边栏，当我单击其中任何一个时，我希望以编程方式在home.js页面内切换选项卡，以及根据单击的项目传递道具，以便动态填充选项卡内容。我想我需要Redux来处理这类东西，不管具体的成分是什么，理论都是正确的；在适当的父级保留状态和状态处理程序，并相应地将处理委托给子级（不能向上传递状态）。下面是一个使用内置
上下文的父/子示例