反應：渲染其他區塊

Question

我是新來reactjs，我試圖溝通2組件，並再次渲染其中之一。

我有以下幾點：

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

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; 

當慾望被加載productPage.js創建與Productpage選擇一個特殊的工具欄

。 我傳遞工具欄的名稱來呈現新視圖，但它沒有，錯過或我做錯了什麼？

另一個最好的解決辦法是直接傳遞工具欄

productPage.js

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

這不是對我的作品

Answer 1

只是爲了確保你正在渲染的元素。能否請你改變你的switch語句：

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

---

而且，考慮使用存儲（？終極版，AltJs），而不是背景，因爲他們可以得到大量的應用程序有點複雜（...我經歷直到我切換到「商店」的方式）