反应：渲染其他区块

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），而不是背景，因为他们可以得到大量的应用程序有点复杂（...我经历直到我切换到“商店”的方式）