如何迁移我的旧 js 代码以做出反应？

Question

大家好我正在研究 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>)
}

这是数据

this.state = {
      data: {
    activities: [
      {
        id: 'A1',
        tasks: [
          {
            id: 'A1.T1'
          },
          {
            id: 'A1.T2'
          }
        ]
      },
      {
        id: 'A2',
        tasks: [
          {
            id: 'A2.T1'
          }
        ]
      },
      {
        id: 'A3',
        tasks: []
      }
    ],
    releases: [
      {
        id: 'R1',
        storiesByTasks: {
          'A1.T1': [
            {
              id: 'A1.T1.S1'
            },
            {
              id: 'A1.T1.S2'
            }
          ],
          'A1.T2': [
            {
              id: 'A1.T2.S1'
            },
            {
              id: 'A1.T2.S2'
            },
            {
              id: 'A1.T2.S3'
            }
          ],
        }
      },
      {
        id: 'R2',
        storiesByTasks: {
          'A1.T2': [
            {
              id: 'A1.T2.S4'
            },
            {
              id: 'A1.T2.S5'
            }
          ],
          'A2.T1': [
            {
              id: 'A2.T1.S1'
            }
          ]
        }
      }
    ]
  };

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

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

Answer 1

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

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

JSFiddle 在这里： https ://jsfiddle.net/h3vj6gtu/2/#&togetherjs=lcOrSkFlET