reactjs – 当React Element名称始终与switch变量相同时,如何删

发布时间：2020-12-15 20:12:34 所属栏目：百科来源：网络整理

导读：什么是更简洁的写作方式. pageType始终与React元素名称相同,我应该可以取消switch语句. import React,{Component,PropTypes} from 'react';import Standard from './Standard/Standard';import Banners from './Banners/Banners';export default class Produ

什么是更简洁的写作方式. 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;
  }
}

解决方法

由于标准和横幅是React组件而不仅仅是简单的元素,你需要做这样的事情,

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

是新的ECMAScript 6功能,称为Object Literal Property Value Shorthand

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!