将material-ui封装到自定义组件中答案

【问题标题】：Encapsulating material-ui into custom components将material-ui封装到自定义组件中
【发布时间】：2016-09-01 20:58:35
【问题描述】：

material-ui Table 组件有点问题。我将表格逻辑分离到标题和正文组件中，并在正文中为每一行添加了不同的组件

export const PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
]

export const ProductCategoryRow = ({
  product: {
    name,
    price
    }
  }) => (<TableRow>
    <TableRowColumn>
      {name}
    </TableRowColumn>
    <TableRowColumn>
      {price}
    </TableRowColumn>
  </TableRow>
)

const ProductHeader = () => (<TableHeader>
    <TableRow>
      <TableHeaderColumn>
        Name
      </TableHeaderColumn>
      <TableHeaderColumn>
        Price
      </TableHeaderColumn>
    </TableRow>
  </TableHeader>
)

export const ProductTableBody = (props) => {
  bin.log(props)
  const Products = props.products.map(product => (<ProductRow product={product} />))
  console.log(Products)
  return Products
}

产品表组件由以下组件组成：

//this does not work, the components are passed down to children and nothing happens.
  const ProductTable = (props) => (
    <Table>
      <ProductHeader/>
      <ProductTableBody products={props.products}/>
    </Table>
  )

我有一个 webpack bin here，你可以看看。我已经注释掉了不起作用的ProductTable。

【问题讨论】：

标签： javascript reactjs ecmascript-6 material-ui

【解决方案1】：

<Table> 实现依赖于其直接子级，该子级具有<TableHeader>、<TableBody> 和可选的<TableFooter> 组件。

如果它至少找不到<TableHeader> 和<TableBody>，那么它根本不会在其标题/正文中呈现任何内容。这就是你的情况。

您可以解决此问题的一种方法是将<TableBody> 和<TableHeader> 与<Table> 保持一致，但使用一些辅助函数来实现您想要的类似级别的抽象。

const ProductCategoryRow = (props) => {
    const { name, price } = props.product

    return (
        <TableRow>
            <TableRowColumn>
              {name}
            </TableRowColumn>
            <TableRowColumn>
              {price}
            </TableRowColumn>
        </TableRow>
    )
}


function createHeaderColumns(columnNames) {
    return columnNames.map(name => <TableHeaderColumn>{name}</TableHeaderColumn>)
}

function createTableRows(rows) {
    return rows.map(row => <ProductCategoryRow product={row} />)
}

const ProductTable = (props) => {

    const headerColumns = createHeaderColumns(props.columnNames)
    const tableRows = createTableRows(props.products)

    return (
            <Table>
                <TableHeader>
                    <TableRow>
                        {headerColumns}
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {tableRows}
                </TableBody>
            </Table>
    )
}

【讨论】：