时间戳

首页 > 解决方案 > 无法在 React.js 中加载表

javascript - 无法在 React.js 中加载表

问题描述

我正在试验片段，并试图将数据动态加载到表中。我没有收到任何错误，但表格没有显示在网页上。请在下面找到我附加的代码片段。有 3 个文件叫做 App.js，FragmentDemo.js（我在这里声明了表格和标题）和 FragmentChild.js（表格数据将从数据数组发送）

    //**App.js**

    import logo from './logo.svg';
    import './App.css';

    import MountLife from './components/MountLifeCycle'
    import Fragment from './components/Fragments/FragmentDemo'


    function App() {
    return (<div className="App">
             <Fragment />
            </div>)
  
    }

    export default App;

    //**FragmentDemo.js**

    import React from 'react'
    import FragChild from './FragChild'

    function FragmentDemo() {
    return (
        <div>
            <table>
                <tr>
                  <th>id</th>
                  <th>Name</th>
                  <th>Company</th>
                </tr>
                <FragChild />
            </table>
        </div>
    )
    }

    export default FragmentDemo

    //**FragChild.js**

    import React from 'react'

    function FragChild() {
    const list = [{
        id: 1,
        name: "P1",
        company:"Google"
    },
    {
        id: 2,
        name: "P2",
        company:"Microsoft"
    },
    {
        id: 3,
        name: "P3",
        company:"Uber"
    }
    ]

    const paramList = list.map( elem => (
        <tr key={elem.id}>
         <td>{list.id}</td>
         <td>{list.name}</td>
         <td>{list.company}</td>
        </tr>))
        
    return (
        <React.Fragment>
            {paramList}
        </React.Fragment>
    )
    }

    export default FragChild

标签： javascripthtmlreactjs

解决方案

在您的paramList, 您指的是list.id,list.name等 - 您真正想要的是elem.id,elem.name等：


const paramList = list.map( elem => (
        <tr key={elem.id}>
         <td>{elem.id}</td>
         <td>{elem.name}</td>
         <td>{elem.company}</td>
        </tr>))

作为一个不相关的问题，您将收到一条警告，提示您还应该有一个tbodyHTML 元素——您也应该将它添加到您的标记中（但是否拥有它不会影响表格是否呈现）

推荐阅读