每個反應組件應該放在單個文件中嗎？

Question

它們似乎與文檔示例中的文件相同：https://facebook.github.io/react/docs/thinking-in-react.html。

你會如何將你的組件拆分成像這樣的實例中的頁面，其中一些組件非常小？

class ProductCategoryRow extends React.Component { 
    render() { 
    return (<tr><th colSpan="2">{this.props.category}</th></tr>); 
    } 
} 

class ProductRow extends React.Component { 
    render() { 
    var name = this.props.product.stocked ? 
     this.props.product.name : 
     <span style={{color: 'red'}}> 
     {this.props.product.name} 
     </span>; 
    return (
     <tr> 
     <td>{name}</td> 
     <td>{this.props.product.price}</td> 
     </tr> 
    ); 
    } 
} 

class ProductTable extends React.Component { 
    render() { 
    var rows = []; 
    var lastCategory = null; 
    this.props.products.forEach((product) => { 
     if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) { 
     return; 
     } 
     if (product.category !== lastCategory) { 
     rows.push(<ProductCategoryRow category={product.category} key={product.category} />); 
     } 
     rows.push(<ProductRow product={product} key={product.name} />); 
     lastCategory = product.category; 
    }); 
    return (
     <table> 
     <thead> 
      <tr> 
      <th>Name</th> 
      <th>Price</th> 
      </tr> 
     </thead> 
     <tbody>{rows}</tbody> 
     </table> 
    ); 
    } 
} 

Answer 1

您可能沒有把每個部件在它自己的文件 - 例如，你可以使用無狀態的功能組件進一步分裂ProductRow組件：

const ProductName = (product) => 
    <span style={{color: product.stocked ? 'black' : 'red'}}> 
    { product.name } 
    </span> 

const ProductRow = (product) => 
    <tr> 
    <td>{ ProductName(product) }</td> 
    <td>{ product.price }</td> 
    </tr>