我嘗試了下面的代碼，但出現錯誤。根據對象屬性獲取單獨的列表
<li>
{items.map(item =>
{item.status === 'active' ^^ <h1>{item.gender}</h1>}
<p>{item.name}</p>
}
<li>
我有我的JSON是這樣的：
[{"name":"james","satus":"active"},{"name":"alice","satus":"deactived"}]
所需的輸出是狀態標題分離列表項。例如：
獲得所需的輸出會從你的基礎上，status
items陣列創建兩個新的陣列
active
- james
- john
- mattew
deactive
- alice
的一種方式。 注意：你有一個錯字「satus」。
爲此，您可以將Array.prototype.filter與Array.prototype.map函數結合使用。這裏有一個演示：
var Demo = React.createClass({
_renderList: function(items, status) {
return (
<div>
<span>{status}</span>
<ul>
{items.filter(item => item.status == status).map((item, i) =>
<li key={i}>{item.name}</li>
)}
</ul>
</div>
);
},
render: function() {
var items = [{"name":"james","status":"active"},{"name":"alice","status":"deactived"}];
return (
<div>
{this._renderList(items, "active")}
{this._renderList(items, "deactived")}
</div>
);
}
});
ReactDOM.render(
<Demo />,
document.getElementById('container')
);<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>
<div id="container"></div>快速樣品如下：
const ListSample =() => {
let items = [
{"name":"James","status":"active"},
{"name":"Alice","status":"deactived"},
{"name":"John","status":"deactived"},
{"name":"Joe","status":"active"},
{"name":"Ann","status":"deactived"},
{"name":"Jane","status":"active"}
];
let statusList = [];
for (let item of items) {
if (statusList.indexOf(item.status) < 0) {
statusList.push(item.status);
}
}
const renderList = (status) => {
return (
<div>
<h2>{status}</h2>
<ul>
{
items
.filter(item => item.status === status)
.map((item, i) => (<li key={i}>{item.name}</li>))
}
</ul>
</div>
);
};
return (
<div>
{ statusList.map(renderList) }
</div>
);
};
ReactDOM.render(<ListSample/>, document.getElementById('app'));<body>
<div id="app"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>想象一下，如果我有其他東西比item.name，會有很多冗餘代碼。 –
@AlexYong我重構了更容易擴展和處理任何數量的狀態。感謝您的反饋。 –
你並不需要使用兩個loops，使用兩個變量active = [], deactived = []和存儲這些和中的有效和無效值他們使用div，檢查片段：
var a = [
{"name":"james","status":"active"},
{"name":"alice","status":"deactived"}
];
class App extends React.Component {
_createList() {
let active = [], deactived = [];
a.forEach((item,i) => {
item.status === 'active'? active.push(<li key={i}>{item.name}</li>) : deactived.push(<li key={i}>{item.name}</li>);
})
return(<div>
Active <ul> {active} </ul>
Deactivated <ul> {deactived} </ul>
</div>
)
}
render() {
return (
<div>
{this._createList()}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('container'));<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>
<div id='container'/>
想象我的名單有很多，如年齡因素，分數等將有大量的重複的代碼。 –
@AlexYong，所以你想爲每一個獨特的財產一個新的名單？你能給個例子嗎？ – Chris
你的例子正在工作，這正是我想要的，但你可以將重複的代碼移動到一個函數？ –