状態を別のコンポーネントに渡す方法を教えてください

Question

こんにちは私のアプリケーションを分割して、私のアプリケーションを分割したいと思います。<button /> から<menu />私はonClickで関数を切り替えるだけです。

ボタンをクリックするとButton.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> 
); 

Answer 1

、あなたがそれを使用していない、また、あなたは何をすべきかをメニューコンポーネント状態visibleを維持し、通信しています

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

ようButtonコンポーネントからMenuに今、あなたNavButtonが

のようになります210

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

Answer 2

それだメニューが表示されますので、メニューコンポーネントのMenu.jsは、これらの状態変化について知る必要があります。一番上のコンポーネントでアプリケーションの状態を維持する方がよいので、アプリの頭脳を管理します。

状態をメニューに移動した場合は、ボタンに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> 
);