Javascript 在同级之间存储活动状态

我很难在两个兄弟组件之间使用活动状态。我有NavComponent.jsx和HeaderComponent.jsx，它们都呈现给DOM中的不同区域

我有一个汉堡包按钮，可以切换活动状态，使其变成一个X，同时为导航设置菜单状态为活动。我的任务是更改菜单的交互，在菜单打开时将内容推到一边，这意味着我需要将标题和导航拆分为DOM中的不同组件。现在，当我希望它们一起工作时，活动状态彼此独立工作

有人告诉我要使用Redux商店，但也无法让它发挥作用

非常感谢您的帮助

NavComponent.jsx

从“React”导入React；
常量导航=（道具）=>(

{
props.items.map(
（项目，idx）=>{
返回(
);
}
)
}

);
导出默认类NavComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
活动：错误
};
此.navItems=[
{
href:'/app/page1'，
正文：“第1页”
},
{
href:'/app/page2'，
正文：“第2页”
},
{
href:'/app/page3'，
正文：“第3页”
}
];
}
handleClick（e）{
const viewportWidth=Math.max（document.documentElement.clientWidth，window.innerWidth | | 0）；
if（viewportWidthstore.js

const defaultState = {
  headerData
};

const store = createStore(rootReducer, defaultState));

export default store;

class HeaderComponent extends React.Component {

    constructor...

    handleClick...

    render...

}

function mapStateToProps (state) {
  return {
    headerData: state.headerData
  };
}

export default connect(mapStateToProps)(HeaderComponent);

class NavComponent extends React.Component {

    constructor...

    handleClick...

    render...

}

function mapDispatchToProps (dispatch) {
  return bindActionCreators(navActions, dispatch);
}

export default connect(mapDispatchToProps)(NavComponent);

rootReducer
这里有一个.js文件，其中所有的reducer都是组合在一起的

HeaderComponent.js

const defaultState = {
  headerData
};

const store = createStore(rootReducer, defaultState));

export default store;

class HeaderComponent extends React.Component {

    constructor...

    handleClick...

    render...

}

function mapStateToProps (state) {
  return {
    headerData: state.headerData
  };
}

export default connect(mapStateToProps)(HeaderComponent);

class NavComponent extends React.Component {

    constructor...

    handleClick...

    render...

}

function mapDispatchToProps (dispatch) {
  return bindActionCreators(navActions, dispatch);
}

export default connect(mapDispatchToProps)(NavComponent);

NavComponent.js

const defaultState = {
  headerData
};

const store = createStore(rootReducer, defaultState));

export default store;

class HeaderComponent extends React.Component {

    constructor...

    handleClick...

    render...

}

function mapStateToProps (state) {
  return {
    headerData: state.headerData
  };
}

export default connect(mapStateToProps)(HeaderComponent);

class NavComponent extends React.Component {

    constructor...

    handleClick...

    render...

}

function mapDispatchToProps (dispatch) {
  return bindActionCreators(navActions, dispatch);
}

export default connect(mapDispatchToProps)(NavComponent);

在此场景中，您的NavComponent可以访问文件
navActions
中的所有操作。您需要为此创建一个js文件
navActions

当您在store.js中创建instant时，您的HeaderComponent映射到商店的
headerData
。您需要为此创建一个.js文件
headerData

由NavComponent中调用的操作触发的减速器将更新存储中的
headerData
，并且
HeaderComponent
将重新渲染，因为它已映射到它

我强烈建议阅读中的全部
基础知识
，以了解如何编写操作和还原程序
，因此基本上您希望渲染
导航组件
和
标题组件
，当您在其中一个组件中执行操作时，它会影响另一个组件的数据或状态？我会将这些组件作为父组件的子组件，父组件将负责使用父组件的状态作为基础的同级通信…称之为侧栏或类似的东西。如果您不知道如何实现这一点，请执行一个小规模的示例：创建一个名为parent的类，以及另外两个名为Brother和Sister的类。您可以测试状态如何通信通过模拟简单的用户体验来实现。然后你可以观察你可以在实际应用程序中实现的行为。@遗憾的是，由于在DOM/HTML中如何分配，父概念在这个阶段不可能实现。它们确实需要是两个独立的组件。我已经尝试了父方法和realized我无法将其分配到不同的位置。使用redux存储就可以做到这一点。一个组件执行的操作将更新存储中新的
状态
或
值
。当更新此新的
状态
或
值
时，使用该
状态
或
值的组件将uld重新呈现并因此更新。我同意使用存储，在@DaveBergschneider同意使用父组件不是一个选项之前，我没有将其标记为重复，请参阅：谢谢，这让我走上了一个好的方向…由于上下文关系，我实际上比大多数文档更了解这一点。没问题。最好的我能给你的建议是学习如何正确编写操作和减缩。一旦完成，更改存储的数据真的很容易！我仍然被卡住了…我想我已经有了它…在我准备付钱给某人的时候。不要犹豫，把你遇到的错误或bug贴在这篇文章上。我会尽快回答。只要说出你的步骤就行了有问题和你想做什么