我有以下数据。
this.state.jsonData = [
{
category: "1",
clientname: "rahul1",
reporthtml: "hello1"
},
{
category : "1",
clientname: "rahul2",
reporthtml: "hello2"
},
{
category : "2",
clientname: "rahul2",
reporthtml: "hello2"
},
{
category : "2",
clientname: "rahul2",
reporthtml: "hello2"
},
{
category : "2",
clientname: "rahul2",
reporthtml: "hello2"
},
];
现在我需要在反应jsx中渲染它,如下所示。没有让if else只显示一次相同的类别
我的HTML:
<div>
<div> Category Name</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
</div>
<div>
<div> Category Name</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
</div>
{this.state.jsonData.map(function(category,i) {
return <div> category.category</div>// This line will only print once for each category need if else condition
<div>Client Name</div>
<div>Client Html</div> ;
})}
答案 0 :(得分:1)
如果我正确地推断出你想要什么,你只需使用嵌套的map
:
render() {
return <div>
{this.state.jsonData.map(function(category) {
return <div>
<div>Category: {category.category}</div>
{category.categorydata.map(function(data) {
return <div>
<div>Client: {data.clientname}</div>
<div>Report: {data.reporthtml}</div>
</div>;
})}
</div>;
})}
</div>;
}
直播示例:
class Category extends React.Component {
constructor(...args) {
super(...args);
this.state = {};
this.state.jsonData = [{
category: "1",
categorydata: [{
clientname: "rahul1",
reporthtml: "hello1"
}, {
clientname: "rahul2",
reporthtml: "hello2"
}, ]
}, {
category: "2",
categorydata: [{
clientname: "rahul1",
reporthtml: "hello1"
}, {
clientname: "rahul2",
reporthtml: "hello2"
}, ]
}];
}
render() {
return <div>
{this.state.jsonData.map(function(category) {
return <div>
<div>Category: {category.category}</div>
{category.categorydata.map(function(data) {
return <div>
<div>Client: {data.clientname}</div>
<div>Report: {data.reporthtml}</div>
</div>;
})}
</div>;
})}
</div>;
}
};
ReactDOM.render(
<Category />,
document.getElementById("react")
);
<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>
答案 1 :(得分:0)
如果你有es6,你可以像这样增强代码:
render() {
return <div>
{
this.state.jsonData.map(category => <div>
<div>Category: {category.category}</div>
{
category.categorydata.map(data => <div>
<div>Client: {data.clientname}</div>
<div>Report: {data.reporthtml}</div>
</div>
)
}
</div>
)}
</div>
}