Инкапсулирующий материал-ui в пользовательские компоненты

Question

У меня возникли проблемы с компонентом таблицы material-ui. Я отделено логическая таблица в компонент заголовка и тела и внутри тела, добавляю другой компонент для каждой строки

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, что не работает.

Answer 1

Реализация <Table> зависит от ее прямых детей, имеющих <TableHeader>, a <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> 
    ) 
}