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

IT技术 reactjs react-jsx
2021-05-05 23:30:09

我有一个映射的 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 循环，但它不起作用，并且还尝试编写另一个映射函数，但它也不起作用。这是可行的吗？

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

然后在任何一种情况下，您都可以像使用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>
  )
}
其它你可能感兴趣的问题
上一篇调用回调如何直接修复 React 类组件中的“this”？ 下一篇如何从状态中获取数据并编辑表单中的元素？