React：他のブロックをレンダリングする

Question

私はreactjsに新しいです、私は2つのコンポーネントを通信しようとしており、それらの1つを再びレンダリングしています。

layout.js

import React from 'react'; 
... 
class Layout extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     toolbar: 'none' 
    }; 
    } 

    getChildContext() { 
    let me = this; 
    return { 
     changeToolbar: function (newToolbar) { 
     me.setState({ toolbar: newToolbar }) 
     } 
    } 
    } 

    render() { 
    const {Search, Nav} = this.props; 

    return (
     <div className="wrap"> 
     <Header Search={Search} /> 
     <Toolbar toolbar={this.state.toolbar} /> 
     <div className="main"> 
      <Nav /> 
      <div className="content"> 
      {this.props.children} 
      </div> 
     </div> 
     </div> 
    ) 
    } 
} 

Layout.childContextTypes = { 
    changeToolbar: React.PropTypes.func 
} 

export default Layout; 

toolbar.js

import React from 'react'; 
... 
import ProductToolbar from '../components/toolbar/productToolbar'; 
import SalesToolbar from '../components/toolbar/salesToolbar'; 

class Toolbar extends React.Component { 
    static propTypes = { 
    toolbar: React.PropTypes.string.isRequired 
    }; 

    state = { 
    toolbar: this.props.toolbar 
    }; 

    componentWillReceiveProps(next_props) { 
    this.setState({toolbar: next_props.toolbar}) 
    } 

    render() { 
    let bar = <div>{this.state.toolbar} undefined</div>; 
    switch (this.state.toolbar) { 
     case 'productToolbar': 
     bar = ProductToolbar; 
     break; 
     case 'salesToolbar': 
     bar = SalesToolbar; 
     break; 
    }; 

    return (
     <div className='toolbar show'> 
     {bar} 
     </div> 
    ) 
    } 
} 

export default Toolbar; 

productToolbar.js

：

私には、以下の持っています

import React from 'react'; 

export default class ProductToolbar extends React.Component { 
    render() { 
    return (
     <div> 
     productToolbar 
     </div> 
    ); 
    } 
}; 

productPage.js欲求はproductPage.jsがProductpageためのオプションを備えた特殊なツールバーを作成ロードされている

import React, {Component} from 'react'; 
... 

class ProductPage extends React.Component { 
    componentDidMount() { 
    this.context.changeToolbar('productToolbar'); 
    }; 

    render() { 
    return (
     <div>Page</div> 
    ); 
    } 
}; 

ComisionPage.contextTypes = { 
    changeToolbar: React.PropTypes.func 
} 

export default ProductPage; 

。 私は新しいビューをレンダリングするためにツールバーの名前を渡しますが、欠落していないか、間違っていると思いますか？

別の最善の解決策は、直接、それはちょうどあなたが要素のレンダリングされていることを確認するために私のため

Answer 1

に動作しませ

productPage.js

import ProductToolbar from '../components/toolbar/productToolbar'; 
... 
    componentDidMount() { 
    this.context.changeToolbar(ProductToolbar); 
    }; 

をツールバー渡すことでした。あなたがする声明を切り替えて変更してくださいすることができます

switch (this.state.toolbar) { 
    case 'productToolbar': 
    bar = <ProductToolbar />; 
    break; 
    case 'salesToolbar': 
    bar = <SalesToolbar />; 
    break; 
}; 

---

また、ストアを使用して（Reduxの、AltJs？）を考える代わりに、コンテキストの彼らは私が経験した大規模なアプリケーション（...上のビット複合体を得ることができますので、