使用其他條件在React jsx渲染函數中循環

Question

我有如下數據。

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"
        },
];

現在我需要在react jsx中渲染它，如下所示。 無法使if if僅顯示同一類別一次

我的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>  ;
})}

Answer 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> 

Answer 2

如果您擁有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>
    }