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 issues

上详细了解此案例

注意

const Components = { Standard, Banners };

是名为Object Literal Property Value Shorthand

的新ECMAScript 6功能

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

1 个答案: