Question

我在两个兄弟组件之间使用活动状态时遇到了困难。我有NavComponent.jsx＆amp; HeaderComponent.jsx，它们都呈现给DOM中的不同区域。

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

有人告诉我要使用Redux商店但是也无法使用它。

非常感谢帮助。

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将更新商店中的headerData，HeaderComponent将自映射到它后重新呈现。

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

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

1 个答案: