当React Element名称始终与switch变量相同时,如何删除此开关案例？

Question

什么是更简洁的写作方式.pageType始终与React元素名称相同,我应该可以取消switch语句.

import React, {Component, PropTypes} from 'react';
import Standard from './Standard/Standard';
import Banners from './Banners/Banners';

export default class ProductPages extends Component {
  static propTypes = {
    pageType: PropTypes.string.isRequired
  }

  render() {

    let ProductPage;
    switch (this.props.pageType) {
      case 'Standard':
        ProductPage = <Standard products={products}/>;
        break;
      case 'Banners':
        ProductPage = <Banners products={products}/>;
        break;
      default:
        throw new Error('pageType is not valid');
    }

    return ProductPage;
  }
}

Answer 1

作为Standard和Banners有React分量不只是简单的Elements,你需要做这样的事情,

const Components = { Standard, Banners };

class ProductPages extends React.Component {
  render() {
    const ProductPage = Components[this.props.pageType];
    return <ProductPage products={ [] } />
  }
}

Example

或者 React.createElement

const Components = { Standard, Banners };

class ProductPages extends React.Component {
  render() {
    return React.createElement(Components[this.props.pageType], { products: [] })
  }
}

Example

但是,你可以在这里看到保存引用Components然后使用它的主要想法.您可以在React GitHub问题上阅读有关此案例的更多信息

注意

const Components = { Standard, Banners };

是新的ECMAScript 6功能,称为对象文字属性值速记