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

你好，我分裂我的应用程序，并希望从我的<button /> 到<menu />状态通过我只是试图做的是切换一个函数与onClick。反应如何将状态传递到另一个组件

所以Button.js文件将有1个按钮，当点击将切换状态为可见或不可见。菜单组件Menu.js需要了解这些状态的变化，使他们能够切换功能，并会显示菜单

Button组件

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

来源

2017-06-06 Alex

您的Menu.js与Button.js相同 – user2340824

按钮和菜单如何连接在一起？你可以添加你的容器组件吗？您可以将状态保持在容器上的一个位置，通过切换状态作为道具菜单。 –

即时通讯导入按钮组件到我的菜单，并希望改变this.state.visible点击按钮，我也更新了我的代码 – Alex

虽然已经导入Button组件菜单，你不使用它，而且你应该做的是保持状态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> 
    ); 
    } 
}

来源

2017-06-06 09:05:10

这是更好地保持最顶层组件的应用程序状态，所以它有助于控制应用程序的大脑。

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

Menu.js

<NavButton toggleClick={this.handleClick} />

然后你可以移动状态信息为Menu还有handleClick功能。

这使得巴顿是无状态：

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

来源

2017-06-06 09:03:27 user2340824

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

回答

相关问题