Javascript 通过从刀片服务器接收的阵列响应js循环

我在Laravel项目中使用React js作为前端。从控制器，我将数组传递到我的视图：

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

现在，在视图中，a可以像这样在阵列中循环：

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

@foreach（$items作为$item）
{{$item->Name}{{{$item->Cost}
@endforeach

这很好用。但是我想让视图更具动态性（顺便说一句，这是购物车中的产品列表）。例如，默认情况下，将选中所有复选框，这意味着用户正在购买所有项目。我想，如果用户取消选中一个框，总价格的变化。所以我制作了一个React组件，我通过道具将$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'));
}

}

类项扩展组件{
render（）{
返回(
//循环遍历产品阵列
);
}
}
导出默认项；
window.onload=function（）{
if（document.getElementById（'listshops'））{
var data=document.getElementById（'listshops'）.getAttribute（“数据”）；
ReactDOM.render（，document.getElementById（'listshops'）；
}
}

如何循环传递给组件的数组，以便像blade中的@foreach那样显示产品

数组#映射

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

然后在渲染中：

const { items } = this.props;

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

const{items}=this.props；
返回(
{items.map（{Name，Cost}）=>}
);

这是以下问题的重复：

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>
);