React 如何将状态传递给另一个组件答案

【问题标题】：React how to pass an state to another componentReact 如何将状态传递给另一个组件
【发布时间】：2017-11-07 04:23:42
【问题描述】：

您好，我拆分了我的应用程序并希望从我的<button /> 传递状态到<menu /> 我只是想用onClick 切换一个功能。

因此，Button.js 文件将有 1 个按钮，单击时会将状态切换为可见或不可见。菜单组件 Menu.js 需要知道这些状态变化，以便他们可以切换功能并显示菜单

按钮组件

import React, { PureComponent } from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import { themr } from 'react-css-themr';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import localStyles from './NavButton.scss';


@themr('NavButton', localStyles)

export default class NavButton extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    this.setState({
      visible: !this.state.visible
    })
    console.log('toggle');
  }

  render() {

    const {theme } = this.props;
    return (
      <div className={theme['nav-button']} onClick={this.toggleMenu}>
      <span></span>
      <span></span>
      </div>
    );
  }
}

菜单

import React, { PureComponent } from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import { themr } from 'react-css-themr';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import localStyles from './Menu.scss';
import { NavButton } from '../../components';


@themr('Menu', localStyles)

export default class Menu extends React.Component {

  render() {

    return (

      <div className="menu-wrapper">
      <CSSTransitionGroup
        transitionName="menu"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}>
        {this.state.visible &&
        <Menus alignment="right">
          <MenuItem hash="first-page">First Page</MenuItem>
          <MenuItem hash="second-page">Second Page</MenuItem>
          <MenuItem hash="third-page">Third Page</MenuItem>
        </Menus>}
        </CSSTransitionGroup>
      </div>
    );
  }
}
const Menus = ({alignment, children, theme }) => (
  <div className="menu">
  <div className={alignment}>{children}</div>
  </div>
);

【问题讨论】：

你的 Menu.js 和 Button.js 一样
按钮和菜单如何连接在一起？你可以添加你的容器组件吗？您可以将状态保存在容器上的单个位置，将切换状态作为道具传递给菜单。
我正在将按钮组件导入到我的菜单中，并希望在单击按钮时更改 this.state.visible，我还更新了我的代码

标签： reactjs ecmascript-6 components state

【解决方案1】：

最好在最顶层的组件中维护应用程序的状态，这样它就可以控制应用程序的大脑。

如果您将状态移动到菜单中，您可以将 onClick 回调传递给按钮，例如

菜单.js

<NavButton toggleClick={this.handleClick} />

然后你可以将State信息移到Menu以及handleClick函数中。

这允许 Button 是无状态的：

const NavButton = ({theme, toggleClick}) => (
    <div className={theme['nav-button']} onClick={toggleMenu}>
        <span></span>
        <span></span>
    </div>
);

【讨论】：

【解决方案2】：

虽然你已经将Button组件导入Menu，但你并没有使用它，你应该做的是保持菜单组件中visible的状态，并从Button组件与Menu通信

export default class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.toggleMenu = this.toggleMenu.bind(this);
  }
  toggleMenu() {
    this.setState({
      visible: !this.state.visible
    })
    console.log('toggle');
  }
  render() {

    return (
      <NavButton toggleMenu={this.toggleMenu}/>
      <div className="menu-wrapper">
      <CSSTransitionGroup
        transitionName="menu"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}>
        {this.state.visible &&
        <Menus alignment="right">
          <MenuItem hash="first-page">First Page</MenuItem>
          <MenuItem hash="second-page">Second Page</MenuItem>
          <MenuItem hash="third-page">Third Page</MenuItem>
        </Menus>}
        </CSSTransitionGroup>
      </div>
    );
  }
}
const Menus = ({alignment, children, theme }) => (
  <div className="menu">
  <div className={alignment}>{children}</div>
  </div>
);

现在你NavButton会喜欢

export default class NavButton extends React.Component {

  render() {

    const {theme } = this.props;
    return (
      <div className={theme['nav-button']} onClick={this.props.toggleMenu}>
      <span></span>
      <span></span>
      </div>
    );
  }
}

【讨论】：