Javascript 表体中的屏幕上未打印任何内容 从“React”导入React； 导出默认类HelloWorld扩展React.Component{ public render（）：JSX.Element{ let elements=[{“id”：1，“isActive”：true，“object”：“Communication”，“preview”：“Un appuru de la Communication”，“sentAt”：{“date”：“2020-12-17 15:18:46.000000”，“timezone_type”：3，“timezone”：“european\/Paris”}，“url”：“\/\/30osd.r.a.d.sendibm1.com\/mk\/mr\/KWK4UOPWPKUGTMY3RRTS3FN0ZN0HB4LTGOZAQWESC3OTK_Zelpof4ZHVGR7XP1GTOUUSMJUTNUOTFTCLQGNHOFC_mOiocZLAtwg5XdfRW”]； 返回( 元素 孔特努 {elements.map（element=>{

{element.id}

{element.url}

})} ); } } 为什么桌子的主体里面什么都没有印？ 我不知道为什么我已经结束了两个小时

---

我希望每个元素有一个tr，并且在每个tr中有一个td代表element.id，一个代表element.url，在tbody内部应该是：

import React from 'react';

export default class HelloWorld extends React.Component {

    public render(): JSX.Element {
        let elements = [{"id":1,"isActive":true,"object":"Communication","preview":"Un appercu de la communication","sentAt":{"date":"2020-12-17 15:18:46.000000","timezone_type":3,"timezone":"Europe\/Paris"},"url":"\/\/30osd.r.a.d.sendibm1.com\/mk\/mr\/kwK4UoPBwpKUgtMy3RrTs3Fn0Zn0hb4lTgoZcAqRkeWesC3OtK_zelPOf4zHvGR7XP1gto1uuSmJUtNuOUTFtcLqgnHofc_mOiocZLAtwg5XdfRW"}];
        return (
            <table>
                <thead>
                <tr>
                    <th>Elements</th>
                    <th>Contenu</th>
                </tr>
                </thead>
                <tbody>
                {elements.map(element => {
                    <tr>
                        <td>
                            <p>{element.id}</p>
                        </td>
                        <td>
                            <p>{element.url}</p>
                        </td>
                    </tr>
                })}
                </tbody>
            </table>
        );
    }

}

{elements.map（element=>{
返回
{element.id}

{element.url}

})}

尝试将元素用括号括起来

另一种选择是：

<tbody>
{elements.map(element => {
                    return <tr>
                        <td>
                            <p>{element.id}</p>
                        </td>
                        <td>
                            <p>{element.url}</p>
                        </td>
                    </tr>
                })}
  </tbody>

{
elements.map（（element）=>(
{element.id}

{element.url}

));
}

确保返回数组的

.map（）

中的JSX元素。可以使用隐式或显式返回：

{
  elements.map((element) => (
    <tr>
      <td>
        <p>{element.id}</p>
      </td>
      <td>
        <p>{element.url}</p>
      </td>
    </tr>
  ));
}

{elements.map（（element）=>(
{element.id}

{element.url}

))}

或：

{elements.map（（element）=>{
返回(
{element.id}

{element.url}

);
})}

首先从render方法中删除JSX.Element，因为如果您使用npm create创建了应用程序，则不需要它，主要的是您需要在map函数中返回表行（目前只有一行）

从“React”导入React；
导出默认类HelloWorld扩展React.Component{
render（）{
let elements=[{“id”：1，“isActive”：true，“object”：“Communication”，“preview”：“Un appuru de la Communication”，“sentAt”：{“date”：“2020-12-17 15:18:46.000000”，“timezone_type”：3，“timezone”：“european\/Paris”}，“url”：\/\/30osd.r.a.d.sendibm1.com\/mk\/mr\/KWK4UOPWPKUGTMY3RRTS3FN0ZN0HB4LTGOZCAKWESC3OTK_Zelpof4ZHVGR7XP1GTOUUUUZJUFTCLGNHOFC_mOiocZLAtwg5XdfRW“）；
返回(
元素
孔特努
{elements.map（element=>{
返回(
{element.id}

{element.url}

)
})}
);
}
}

<tbody>
  {elements.map((element) => (
    <tr>
      <td>
        <p>{element.id}</p>
      </td>
      <td>
        <p>{element.url}</p>
      </td>
    </tr>
  ))}
</tbody>

<tbody>
  {elements.map((element) => {
    return (
      <tr>
        <td>
          <p>{element.id}</p>
        </td>
        <td>
          <p>{element.url}</p>
        </td>
      </tr>
    );
  })}
</tbody>

    import React from 'react';

    export default class HelloWorld extends React.Component {

    render(){
        let elements = [{"id":1,"isActive":true,"object":"Communication","preview":"Un appercu de la communication","sentAt":{"date":"2020-12-17 15:18:46.000000","timezone_type":3,"timezone":"Europe\/Paris"},"url":"\/\/30osd.r.a.d.sendibm1.com\/mk\/mr\/kwK4UoPBwpKUgtMy3RrTs3Fn0Zn0hb4lTgoZcAqRkeWesC3OtK_zelPOf4zHvGR7XP1gto1uuSmJUtNuOUTFtcLqgnHofc_mOiocZLAtwg5XdfRW"}];
        return (
            <table>
                <thead>
                <tr>
                    <th>Elements</th>
                    <th>Contenu</th>
                </tr>
                </thead>
                <tbody>
                {elements.map(element => {
                   return(
                   <tr>
                        <td>
                            <p>{element.id}</p>
                        </td>
                        <td>
                            <p>{element.url}</p>
                        </td>
                    </tr>
                    )
                })}
                </tbody>
            </table>
        );
    }

}