Javascript 反应：渲染其他块

我是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;

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;

import React from 'react';

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

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;

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

开关（this.state.toolbar）{
案例“productToolbar”：
bar=；
打破
案例“salesToolbar”：
bar=；
打破
};

---

---

还考虑使用存储（ReDux，AltJs？）而不是上下文，因为它们可以在大型应用程序上变得有点复杂（……我经历了痛苦，直到我切换到“商店”方法）

< P>以确保您正在渲染元素。请将您的切换语句更改为：

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

开关（this.state.toolbar）{
案例“productToolbar”：
bar=；
打破
案例“salesToolbar”：
bar=；
打破
};

---

---

还考虑使用存储（ReDux，AltJs？）而不是上下文，因为它们可以在大型应用程序上变得有点复杂（……我经历了痛苦，直到我切换到“商店”方法）

绝对支持第二部分：组件到组件的通信应该完全被劝阻，因为它会导致一系列复杂且非常难以调试的事件。将单向数据流与动作调度器（例如Redux）结合使用，可以很好地解决这个问题。请明确支持第二部分：绝对不鼓励组件间的通信，因为这会导致复杂且非常难以调试的事件链。与动作调度器（例如Redux）一起使用单向数据流可以很好地解决这个问题。