Javascript 如何迁移旧的js代码以作出反应？

大家好，我正在研究reactjs我正在将我的js代码迁移到reactjs这里我有一个问题，如果你想帮助我，谢谢你的帮助 我把这段代码交给一个好人编辑

       {props
        .data
        .releases
        .map((release, i) => <Fragment key={i}>
          <tr>
            <td colspan={acts.length}>{release.id}</td>
          </tr>
          <tr>
            {Object
              .keys(release.storiesByTasks)
              .map((storyByTasksKeys, i) => <td key={i}>
                <ul>
                  {release
                    .storiesByTasks[storyByTasksKeys]
                    .map((taskss, j) => <li key={j}>{taskss.id}</li>)
}
                </ul>
              </td>)
}
          </tr>
        </Fragment>)
}

在旧的js代码中，我创建了一个名为taskss yellow one var taskss=[]的表；我从数据中推送所有任务，然后将emty对象推送到其中，这样我就可以显示这样的内容

---

我想要同样的反应，它给了我这个

根据你的数据，这是如何实现的：

return (
  <table border="1">
    <tbody>
      <tr>{acts.map((cell, i) => <td key={i}>{cell != null ? cell.id : " "}</td>)}</tr>
      <tr>{taskss.map((cell, i) => <td key={i}>{cell != null ? cell.id : " "}</td>)}</tr>
      {
         props
         .data
         .releases
         .map((release, i) =>
           <React.Fragment key={i}>
             <tr><td colspan={acts.length}>{release.id}</td></tr>
             <tr>
             {
               taskss.map((tasks, j) =>
                 <td key={j}>
                 { 
                   tasks.id && release.storiesByTasks[tasks.id] ?
                   <ul>
                   {release.storiesByTasks[tasks.id].map((story, k) =><li key={k}>{story.id}</li>)}
                   </ul> : null
                  }
                  </td>
                )
              }
            </tr>
          </React.Fragment>
        )
      }
    </tbody>
  </table>
);

返回(
{acts.map（（cell，i）=>{cell！=null？cell.id:“}）}
{taskss.map（（cell，i）=>{cell！=null？cell.id:“”）}
{
道具
.数据
.发布
.map（（发布，i）=>
{release.id}
{
taskss.map（（tasks，j）=>
{ 
tasks.id&&release.storiesByTasks[tasks.id]？

{release.storiesByTasks[tasks.id].map（（story，k）=>
{story.id}
）
：空
}
)
}
)
}
);

---

jshiddle here:

单击并显示此项，然后查看循环batmanh的巨大差异。我可以如何更改它们？不知道嵌套循环在react中是如何工作的我不确定其结构，但我肯定地认为这是使用map函数的最佳示例。最具可读性。@VlatkoVlahek非常感谢您的回答。我插入了您的代码，它告诉我发布不起作用。如果数据是您状态的一部分，则应该是

this.state.data.releases.map（…）

。显然，

storiesByTask

是一个对象，而不是数组，所以你不能

map

它。@Striped这不是问题，我确实通过了state这行代码很好，非常感谢你，我们能成为朋友吗带条纹的

return (
  <table border="1">
    <tbody>
      <tr>{acts.map((cell, i) => <td key={i}>{cell != null ? cell.id : " "}</td>)}</tr>
      <tr>{taskss.map((cell, i) => <td key={i}>{cell != null ? cell.id : " "}</td>)}</tr>
      {
         props
         .data
         .releases
         .map((release, i) =>
           <React.Fragment key={i}>
             <tr><td colspan={acts.length}>{release.id}</td></tr>
             <tr>
             {
               taskss.map((tasks, j) =>
                 <td key={j}>
                 { 
                   tasks.id && release.storiesByTasks[tasks.id] ?
                   <ul>
                   {release.storiesByTasks[tasks.id].map((story, k) =><li key={k}>{story.id}</li>)}
                   </ul> : null
                  }
                  </td>
                )
              }
            </tr>
          </React.Fragment>
        )
      }
    </tbody>
  </table>
);