我有一个映射的 const 变量，我用它来注入渲染方法中的返回值。我现在的问题是，我正在映射的对象本身有一个对象集合。我想循环遍历每一个并添加 jsx 语法。这就是我所拥有的：
const tasks = this.state.tasks.map((task) => {
var editable = this.state.editableTasks.filter(id => id === task.Id).length > 0;
return (
<li key={task.Id} className="list-group-item" style={{minHeight: '50px'}}>
<div className="pull-left" style={{width: '50%'}}>
{editable ? <input type="text" /> : <span>{task.Name}</span>}
</div>
<div className="pull-right" style={{marginTop: '-5px', width: '50%'}}>
<div className="pull-right">
<button className="btn btn-default" onClick={() => {this.AddSubTask(task.Id)}}>Add</button>
<button className="btn btn-default" onClick={() => { this.EditTask(task.Id)}}>{editable ? 'Save' : 'Edit'}</button>
</div>
</div>
</li>
//What I have currently tried:
//for(var i = 0; i < task.SubTasks.length; i++) {
//<ul>
//<li>
//...etc
//</li>
//</ul>
//}
//{task.SubTasks.map((subtask) => {
//<ul>
//<li>
//...etc
//</li>
//</ul>
//)};
);
});
return (
<div className="table-wrapper">
<div className="task-container">
<h3>{this.props.rowName}</h3>
</div>
<ul id="tasksContainer">
{tasks}
<li className="list-group-item list-group-item-last"><input type="button" value="Add Task" onClick={this.createTask.bind(this)} className="btn btn-success btn-override" /></li>
</ul>
</div>
);
我对格式表示歉意，无法完全正确。无论如何，所以在 const task = 声明中，我想循环遍历每个 task.SubTasks （索引集合的集合）并添加另一个无序列表。
我尝试过简单地编写一个 for 循环，但它不起作用，并且还尝试编写另一个映射函数，但它也不起作用。这可行吗？
另一个地图应该可以工作.. for 循环could如果您首先创建一个空数组并将组件推送到其中，则可以工作。
const subTaskComponents = []
for (var i = 0; i < task.SubTasks.length; i++) {
subTaskComponents.push(
<ul key={task.SubTasks[i].id>
<li>..</li>
</ul>
)
}
map不过是一个更好的解决方案
const subTaskComponents = task.SubTasks.map(subTask =>
<ul key={subTask.id}>
<li>..</li>
</ul>
)
然后，无论哪种情况，您都可以像使用它一样使用它tasks内部渲染：
render() {
const tasks = this.state.tasks.map((task) => {
const subTaskComponents = task.SubTasks.map(subTask =>
<ul key={subTask.id}>
<li>..</li>
</ul>
)
return (
<div>{subTaskComponents}</div>
)
}
return (
<div>{tasks}</div>
)
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
