如何写出漂亮的React组件

ppu={this.props.ppu}

isLoggedIn={this.props.isLoggedIn}

gridView={this.props.isGridView}

);

}

render() { 
 
  <div class="search-results-list"> 
 
    {!!this.props.isSoftSort && <SoftSortBanner />} 
 
  </div> 
 
}

这么多的Props估计看着都头疼，如不雅我们要将这些Props持续传入下一层，大年夜概就要变成下面这个样子了:

render() { 
 
  const { 
 
    hidePriceFulfillmentDisplay, 
 
    primaryOffer, 
 
    productType, 
 
    productPageUrl, 
 
    inventory, 
 
    submapType, 
 
    ppu, 
 
    isLoggedIn, 
 
    gridView 
 
  } = this.props; 
 
  return ( 
 
    <ProductPrice 
 
      hidePriceFulfillmentDisplay={hidePriceFulfillmentDisplay} 
 
      primaryOffer={primaryOffer} 
 
      productType={productType} 
 
      productPageUrl={productPageUrl} 
 
      inventory={inventory} 
 
      submapType={submapType} 
 
      ppu={ppu} 
 
      isLoggedIn={isLoggedIn} 
 
      gridView={isGridView} 
 
    /> 
 
  ); 
 
}

临时不推敲unKnown Props，我们可以应用解构赋值来实现这个功能:

render() { 
 
  const props = this.props; 
 
  return <ProductPrice {...props} /> 
 
}

Method Definition Shorthand

最后这个办法不必定多有效，不过照样能让你的代码变得加倍漂亮。如不雅你欲望在Object中添加函数，你可以应用ES2015 Method Definition Shorthand来代替传统的ES5的表达式，譬如:

5/6 首页上一页 3 4 5 6 下一页尾页

　　推荐阅读

　　第一次使用苹果操作系统需要掌握哪些知识？

用 AirDrop 可以便利地在 Mac与Mac、iPhone与iPhone 甚至 Mac 与 iPhone 之间无线发送分享照片、视频、网站、地位等内容。速度还很快。应用时须要开启Wi-Fi和蓝牙。第一次应用苹不雅操作>>>详细阅读

本文标题：如何写出漂亮的React组件

地址：http://www.17bianji.com/lsqh/37109.html

1/2 1