如何在render方法中的React const变量内部循环

jdmdevdotnet

我有一个映射的const变量，可用于在render方法中注入我的返回值。现在我的问题是，我正在映射的对象本身具有对象的集合。我想遍历每一个并添加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循环可以工作。

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中一样使用它：

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>
  )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。