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} />

然后，您可以将状态信息移动到Menu以及handleClick函数。

这允许Button无状态：

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

Answer 2

虽然您已将Button组件导入Menu，但您没有使用它。此外，您应该将状态visible保留在菜单组件中，并与Menu中的Button进行通信组件如

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>
    );
  }
}

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

2 个答案: