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

Question

你好，我拆分了我的应用程序，想从我的 <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>
);

Answer 1

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

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

Menu.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>
);

Answer 2

虽然你已经将 Button 组件导入到 Menu 中，但你并没有使用它，另外你应该做的是在菜单组件中保持状态 visible 并从 [=14] 通信到 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>
    );
  }
}

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

React how to pass an state to another component

components

state

ecmascript-6

reactjs