reactjs - 如何在 Reactjs 中遍历数组对象
问题描述
我现在从数据库中获取一些数据如何从这里显示结果项目数据如下所示
<div className="row">
{ this.state.product.length > 0 ? this.state.product.map(product =>
<div className="col-lg-4 col-md-6 txt-center m-b-40" >
<div className="plan-bx">
<h1>{product.product}</h1>
<p>Plan</p>
<br/>
<div>
<h2>Free</h2>
{this.state.product.map(p => p.result.map(r =>
<span>
<hr/>
<br/>
<h3>{r.fprice}</h3>
<h4><span>5,999₹ </span>/ year</h4>
</span>
) )}
<br/>
</div>
</div>
<a className="btn-view" href="">View Details</a>
</div>
):null}
我是 reactjs 新手 谢谢
解决方案
这是一个如何实现它的示例。
var data = {
product: [
{
name: 'product1',
result: [{ price: 10, name: 'price'}, { price: 2, name: 'discount' }]
},
{
name: 'product2',
result: [{ price: 200, name: 'price'}, { price: 50, name: 'discount'}]
}
],
}
// Example class component
class App extends React.Component {
render() {
return (
<div className='product-card'>
{data.product && !!data.product.length && data.product.map(p =>
<div>
{p.name}
{p.result.map(r =>
<div>{r.name}<br />{r.price}$</div>
)}
</div>
)}
</div>
);
}
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("react")
);
.product-card {
display: flex;
}
.product-card-result {
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
推荐阅读
- c# - 从存储过程输出整数时 SQL Server 中的转换错误
- git - 有没有办法 git cherry-pick ONTO 另一个分支?
- firebase - 将应用程序发明者发送到firebase数据库时删除一些字符串
- python-3.x - Python3 和 networkx=2.2:set_node_attributes 并获得不可散列的类型:'dict'
- ruby-on-rails - 将 ruby-debug-ide 附加到现有的 Rails 服务器
- laravel - 如何将使用 vue-cli 创建的现有 vuejs 应用程序集成到 laravel 项目中
- broadleaf-commerce - Broadleaf 管理面板在 ReactStarter 中扩展 Spring Boot
- java - 如果 Java 不支持参数化类型数组,那么 Arrays.asList() 如何与它们一起工作?
- c - 从文件读取后打印链表的分段错误
- javascript - 如何在该范围函数内调用本地函数之前禁用它?