如何遷移我的舊 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