javascript - 通过从 Blade 接收到的数组 react js循环

Question

我在 Laravel 项目中使用 React js 作为前端。从 Controller ，我将一个数组传递给我的 View :

return view('shopCart')->with('items',$it);

现在在 View 中 a 可以像这样遍历数组:

@foreach($items as $item)
                <li><input type="checkbox" name=""> <span>{{$item->Name}}</span> <span></span>  <span>{{$item->Cost}}</span> </li>
@endforeach

这工作正常。但我想让 View 更加动态(顺便说一句，这是购物车中的产品列表)。例如，默认情况下会选中所有复选框，这意味着用户正在购买所有商品。我希望如果用户取消选中某个框，则总价格会发生变化。所以我制作了一个 React 组件，并通过 props 将 $items 数组传递给该组件:

<div id="listshops" datas={{$items}}></div>

还有组件:

class Items extends Component {
    render() {


        return (
            <div className="container">
               <a href="/products">Continue shopping</a>
               //LOOP THROUGH THE ARRAY OF PRODUCTS
            </div>
        );
    }
}

export default Items;


window.onload=function(){
if (document.getElementById('listshops')) {
    var data=document.getElementById('listshops').getAttribute("datas");
    ReactDOM.render(<Items items={data}/>, document.getElementById('listshops'));
}

}

我如何遍历我传递给组件的数组，以便我可以像 Blade 中的@foreach 一样显示产品？

Answer 1

Array#map，不要“循环”。您正在将一个数据集(您的产品)映射到另一个大小相同的数据集(React 组件)

const { items } = this.props;

return (
  <div className="container">
    <a href="/products">Continue shopping</a>
    {items.map(({ Name, Cost }) => <li key={Name}>
      <input type="checkbox" name="" /> <span>{Name}</span> <span></span>  <span>{Cost}</span>
    </li>)}
  </div>
);

通常当您映射 时，这是一个很好的指示，表明您正在使用一个也可以重用的组件。这对您来说可能是一种更简洁的方法:

const Product = ({ Name, Cost }) => (
  <li>
    <input type="checkbox" name="" />
    <span>{Name}</span>
    <span></span>
    <span>{Cost}</span>
  </li>
);

然后在你的渲染中:

const { items } = this.props;

return (
  <div className="container">
    <a href="/products">Continue shopping</a>
    {items.map(({ Name, Cost }) => <Product {...{Name, Cost}}/>}
  </div>
);