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

您好，我拆分了我的应用程序，希望通过我的

我只是想用onClick切换函数

因此，当单击Button.js文件时，它将有1个按钮，并将状态切换为可见或不可见。menu component 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}来自'React'；
从“react addons css transition group”导入CSSTransitionGroup；
从'react css themr'导入{themr}；
从“道具类型”导入道具类型；
从“类名称”导入类名称；
从“/NavButton.scss”导入本地样式；
@themr（'NavButton'，localStyles）
导出默认类NavButton扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
可见：假，
};
this.toggleMenu=this.toggleMenu.bind（this）；
}
切换菜单（）{
这是我的国家({
可见：！this.state.visible
})
log（'toggle'）；
}
render（）{
const{theme}=this.props；
返回(
);
}
}

菜单

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

import React，{PureComponent}来自'React'；
从“react addons css transition group”导入CSSTransitionGroup；
从'react css themr'导入{themr}；
从“道具类型”导入道具类型；
从“类名称”导入类名称；
从“./Menu.scss”导入本地样式；
从“../../components”导入{NavButton}；
@主题（“菜单”，本地样式）
导出默认类菜单扩展了React.Component{
render（）{
返回(
{this.state.visible&&
首页
第二页
第三页
}
);
}
}
常量菜单=（{alignment，children，theme}）=>(
{儿童}
);

最好将应用程序的状态保持在最上面的组件，这样它就可以控制应用程序的大脑

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

Menu.js

<NavButton toggleClick={this.handleClick} />

---

虽然您已将按钮组件导入菜单，但您并没有使用它，您还应该在菜单组件中保持状态

可见

，并通过

按钮

组件与

菜单

通信

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

---

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

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

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