React.js Table 组件

Question

我正在使用 React.js 创建比萨饼应用程序，并希望在 table 中显示比萨饼选项。我想使用类似 this table 的方式来开发我的 table，而不是我在 choices.js 中使用的方式。

Choices.js

 return (
                 <div className="page-wrap">

                  <table>
                     <thead>
                         <tr>
                     <th>Pizza Name</th>
                     <th>Price</th>
                     </tr>
                     </thead>
                     <tbody>
                         <tr>
                 <td key={index}>
                    <a href onClick={this.handleChoice.bind(this, pizza)}>
                    {pizza.name}</a></td> 
                  </tr>
                  <tr>  
                <td>${pizza.price}</td>
                </tr>
                </tbody>
            </table>
           </div> 
             )    
        });

Options.js

var pizzas = [
    {
        name: 'Cheese Pizza',
        cheese: 'Mozzarella',
        toppings: [],
        price: 5
    },
    {
        name: 'Papas Special',
        cheese: 'Parmesan',
        toppings: ['Spinach', 'Lobster', 'Hot Oil'],
        price: 50
    },
    {
        name: 'Wild West',
        cheese: 'Spicy Mozzarella',
        toppings: ['Red Onions', 'Texas Chilli', 'Grilled Chicken'],
        price: 25
    },
    {
        name: 'California Pizza',
        cheese: 'Mozzarella',
        toppings: ['Spinach', 'Guacamole', 'Cherry Tomato'],
        price: 25
    },
    {
        name: 'Buffalo Chicken Pizza',
        cheese: 'Spicy Blue Cheese',
        toppings: ['Red Onions', 'Texas Chilli'],
        price: 25
    },
    {
        name: 'Jerk Chicken Pizza',
        cheese: 'Mozzarella',
        toppings: ['Red Onions', 'Jerk Sauce'],
        price: 25
    },
    {
        name: 'Salad Pizza',
        cheese: 'Mozzarella',
        toppings: ['Red Onions', 'Lettuce', 'Tomato'],
        price: 25
    }
];

Answer 1

您要这样做吗？ http://jsfiddle.net/dahdx6eu/337/

var cols = [
    { key: 'Name', label: 'Name' },
    { key: 'Cheese', label: 'Cheese' },
    { key: 'Toppings', label: 'Toppings' },
    { key: 'Price', label: 'Price' },
];

var data = [
    {
          id: 1,
        name: 'Cheese Pizza',
        cheese: 'Mozzarella',
        toppings: [],
        price: 5
    },
    {
          id: 2,
        name: 'Papas Special',
        cheese: 'Parmesan',
        toppings: ['Spinach', 'Lobster', 'Hot Oil'],
        price: 50
    },
    {
        id: 3,
        name: 'Wild West',
        cheese: 'Spicy Mozzarella',
        toppings: ['Red Onions', 'Texas Chilli', 'Grilled Chicken'],
        price: 25
    },
    {
          id: 4,
        name: 'California Pizza',
        cheese: 'Mozzarella',
        toppings: ['Spinach', 'Guacamole', 'Cherry Tomato'],
        price: 25
    },
    {
        id: 5,
        name: 'Buffalo Chicken Pizza',
        cheese: 'Spicy Blue Cheese',
        toppings: ['Red Onions', 'Texas Chilli'],
        price: 25
    },
    {
        id: 6,
        name: 'Jerk Chicken Pizza',
        cheese: 'Mozzarella',
        toppings: ['Red Onions', 'Jerk Sauce'],
        price: 25
    },
    {
        id: 7,
        name: 'Salad Pizza',
        cheese: 'Mozzarella',
        toppings: ['Red Onions', 'Lettuce', 'Tomato'],
        price: 25
    }
]

var Table = React.createClass({

    render: function() {
        var headerComponents = this.generateHeaders(),
            rowComponents = this.generateRows();

        return (
            <table>
                <thead> {headerComponents} </thead>
                <tbody> {rowComponents} </tbody>
            </table>
        );
    },

    generateHeaders: function() {
        var cols = this.props.cols;  // [{key, label}]

        // generate our header (th) cell components
        return cols.map(function(colData) {
            return <th key={colData.key}> {colData.label} </th>;
        });
    },

    generateRows: function() {
        var cols = this.props.cols,  // [{key, label}]
            data = this.props.data;

        return data.map(function(item) {
            // handle the column data within each row
            console.log(item)
            return (<tr key={item.id}><td>{item.name}</td><td>{item.cheese}</td><td>{item.toppings} </td><td>{item.price}</td></tr>);
        });
    }
});

React.js Table 组件

React.js Table Component

tabular

reactjs