在兄弟姐妹之间存储活动状态

Question

我在利用两个同级组件之间的活动状态时遇到了困难。我有 NavComponent.jsx 和 HeaderComponent.jsx，它们都呈现到 DOM 中的不同区域。

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

有人告诉我要使用 Redux Store，但也无法使用。

非常感谢您的帮助。

NavComponent.jsx

import React from 'react';

const Navigation = (props) => (
  <nav className={'navigation' + (props.active ? ' slide-in' : '')}>
    <ul className="nav">
      {
        props.items.map(
          (item, idx) => {
            return (
              <NavigationLink key={idx} href={item.href} text={item.text} clickHandler={props.clickHandler} />
            );
          }
        )
      }
    </ul>
  </nav>
);

export default class NavComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      active: false
    };
    this.navItems = [
      {
        href: '/app/page1',
        text: 'PAGE 1'
      },
      {
        href: '/app/page2',
        text: 'PAGE 2'
      },
      {
        href: '/app/page3',
        text: 'PAGE 3'
      }
    ];
  }

  handleClick (e) {
    const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    if (viewportWidth <= 767) {
      this.setState({ active: !this.state.active });
    }
  }

  render () {
    return (
        <Navigation active={this.state.active} items={this.navItems} clickHandler={this.handleClick.bind(this)} />
    );
  }
}

HeaderComponent.jsx

import React from 'react';
import Logo from '../img/logo.png';
import Logo2x from '../img/logo@2x.png';
import Logo3x from '../img/logo@3x.png';

const HamburgerToggle = (props) => (
  <button className={'hamburger hamburger--squeeze' + (props.active ? ' is-active' : '')} onClick={props.clickHandler} type="button">
    <span className="hamburger-box">
      <span className="hamburger-inner"></span>
    </span>
  </button>
);

const BrandLogo = () => (
  <a href="/app/page1" className="logo-link">
    <img width="92" height="29" src={Logo} srcSet={Logo + ' 1x, ' + Logo2x + ' 2x, ' + Logo3x + '3x'} alt="Logo" className="logo" />
  </a>
);

export default class HeaderComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      active: false
    };
  }
  handleClick (e) {
    const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    if (viewportWidth <= 767) {
      this.setState({ active: !this.state.active });
    }
  }
  render () {
    return (
      <div>
        <HamburgerToggle active={this.state.active} clickHandler={this.handleClick.bind(this)} />
        <BrandLogo />
      </div>
    );
  }
}

Answer 1

store.js

const defaultState = {
  headerData
};

const store = createStore(rootReducer, defaultState));

export default store;

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

HeaderComponent.js

class HeaderComponent extends React.Component {

    constructor...

    handleClick...

    render...

}

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

export default connect(mapStateToProps)(HeaderComponent);

NavComponent.js

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 中创建即时时，您的 HeaderComponent 已映射到商店的 headerData。您需要为此创建一个 .js 文件 headerData。

由 NavComponent 中调用的操作触发的 reducer 将更新 store 中的 headerData，而 HeaderComponent 将在映射到它后重新渲染。

我强烈建议阅读Redux Documentation 中的Basics 的全部内容，以了解如何编写Actions 和Reducers。