我尝试了下面的代码，但出现错误。根据对象属性获取单独的列表
<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
你的例子正在工作，这正是我想要的，但你可以将重复的代码移动到一个函数？ –