React.js表組件

Question

我正在用React.js創建一個披薩應用程序，並希望在表格中顯示比薩餅選項。我想用this 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>); 
     }); 
    } 
});