javascript – 每个反应组件应该在单个文件中吗？

它们似乎位于文档示例中的同一文件中：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>
    );
  }
}

解决方法:

您可能不必将每个组件放在自己的文件中 – 例如,您可以使用无状态功能组件进一步拆分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>

标签：javascript,code-organization,reactjs,organization,jsx
来源： https://codeday.me/bug/20190627/1307892.html