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

只是为了确保你渲染元素。你可以把你的开关声明改为：

(a = b) = c

另外，考虑使用商店（Redux，AltJs？）而不是上下文，因为它们在大型应用程序上会变得有点复杂（...我经历了痛苦，直到我切换到＆＃39; store＆＃39;的方法）

React：渲染其他块

1 个答案: