Question

在json feed中（下面）我有两个数组，“rent”和“buy”我希望加入并显示在html表中，但我不知道该在哪里做。

Feed看起来像这样......

"store": {
                "rent": [
                    { "title": "Lord of the ring masters", "cost": 2.99 }
                ],
                "buy": [
                    { "title": "Fast and Furious 14", "cost": 5.99 },
                    { "title": "Shogun Assassin", "cost": 2.99 }
                ],
                "total": 30.20
            }

我视图中的渲染功能，将正确显示以上其中一个

 render: function(){

    var createRow = function(rowItem, i){
        return (
            <tr key={i}>

                <td>{rowItem.name}</td>
                <td>{rowItem.cost}</td>
            </tr>
        );
    };


    return (
        <div>
            <h1>Package</h1>
            <table className="table">
                <thead>
                <th>Package</th>
                <th>Name</th>
                <th>Cost</th>
                </thead>
                <tbody>
                {this.props.packageList.rent.map(createRow, this)}
                </tbody>
            </table>
            Total: {this.props.packageList.total}
        </div>
    );
}

任何人都可以告诉我如何改变上面的内容来加入数组并呈现这样的数据......

**Rent** Lord of the ring masters £2.99
**Buy** Fast and Furious 14 £5.99
**Buy** Shogun Assassin £2.99

Answer 1

不是在渲染中调用map函数，而是在对象上创建另一个返回行数组的方法。所以你的新组件看起来像：

var myClass = React.createClass({    

renderRows: function() {
  var rows = [];
  this.props.packageList.rent.forEach(function(rowItem, i) {
    rows.push(
        <tr key={i}>
            <td>rent</td>
            <td>{rowItem.name}</td>
            <td>{rowItem.cost}</td>
        </tr>
    );
  });

  this.props.packageList.buy.forEach(function(rowItem, i) {
    rows.push(
        <tr key={i}>
            <td>buy</td>
            <td>{rowItem.name}</td>
            <td>{rowItem.cost}</td>
        </tr>
    );
  });
  return rows;
},

render: function(){

return (
    <div>
        <h1>Package</h1>
        <table className="table">
            <thead>
            <th>Package</th>
            <th>Name</th>
            <th>Cost</th>
            </thead>
            <tbody>
            {this.renderRows()}
            </tbody>
        </table>
        Total: {this.props.packageList.total}
    </div>
);
}

})

或者，您可以提前组合数据，只需对整个事物进行一次循环。最后，您可能不希望在渲染函数中定义新函数，而是按照我的建议，在组件上创建一个新方法。另外，我还没有测试过上面的内容，所以一定要检查错误。

在反应渲染函数中连接数组

1 个答案: