如何在 render 方法中循环 react const 变量

Question

我有一个映射的 const 变量，我用它在渲染方法中注入我的 return。我现在的问题是，我正在映射的对象本身有一个对象集合。我想遍历每一个并添加 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 循环，但没有成功，还尝试编写另一个映射函数，但也没有成功。这可行吗？

Answer 1

另一个映射应该可以工作。如果您先创建一个空数组并将组件推送到它，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>
)

然后在任何一种情况下，您都可以像在 render:

中使用 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>
  )
}

如何在 render 方法中循环 react const 变量

How to loop inside a react const variable in the render method

reactjs

react-jsx