如何写出漂亮的React组件

</Link>

</div>

代码行数又少了不少咯!

另一块我认为异常实用Arrow Function的处所就是Redux的mapStateToProps函数:

const mapStateToProps = ({isLoading}) => { 
 
  return ({ 
 
    loading: isLoading, 
 
  }); 
 
};

须要留意的是，如不雅你返回的是Object，你须要担保在大年夜括号内:

const mapStateToProps = ({isLoading}) => ({ 
 
  loading: isLoading 
 
});

应用Arrow Function优化的核心点在于其可以或许经由过程专注于函数的重要部分而晋升代码的┞符体可读性，并且避免过多的模板代码带来的噪音。

这种表达式在二选一衬着的时刻很有效不雅，不过对于选择性衬着一个的情况很不友爱，譬如如下的情况:

合理应用Object Destructing与Spread Attributes

const SoftSort = ({ hardSortUrl, sortByName, onClick }) => { 
 
  return ( 
 
    <div className="SearchInfoMessage"> 
 
      Showing results sorted by both Relevance and {sortByName}. 
 
      <Link 
 
        href=http://developer.51cto.com/art/201709/{`?${hardSortUrl}`} 
 
        onClick={(ev) => onClick(ev, hardSortUrl)}> 
 
        Sort results by {sortByName} only 
 
      </Link> 
 
    </div> 
 
  ); 
 
};

大年夜的组件往往受困于this.props过长的困境，典范的如下所示:

render() { 
 
  return ( 
 
    <ProductPrice 
 
      hidePriceFulfillmentDisplay= 
 
       {this.props.hidePriceFulfillmentDisplay} 
 
      primaryOffer={this.props.primaryOffer} 
 
      productType={this.props.productType} 
 
      productPageUrl={this.props.productPageUrl} 
 
      inventory={this.props.inventory} 
 
      submapType={this.props.submapType} 	
			 4/6   首页 上一页 2 3 4 5 6 下一页 尾页	
			

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


本文标题：如何写出漂亮的React组件
地址：http://www.17bianji.com/lsqh/37109.html
 1/2    1