Question

你好我是反应js的新手，我想创建一个简单的表，现在没有数据库连接。我创建这样的东西，但我不知道如何创建列名称。 Smb知道如何创建？

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data:
                [
                    {
                        "id": 1,
                        "name": "Foo",
                        "age": "20"
                    },
                    {
                        "id": 2,
                        "name": "asdas",
                        "age": "30"
                    },
                    {
                        "id": 3,
                        "name": "fgdf",
                        "age": "40"
                    }
                ]
        }
    }

    render() {
        return (
            <div>
                <Header/>
                <table>
                    <tbody>
                    {this.state.data.map((person, i) => <TableRow key={i}
                                                                  data={person}/>)}
                    </tbody>
                </table>
            </div>
        );
    }
}

class Header extends React.Component {
    render() {
        var myStyle = {
            fontSize: 20,
            color: '#2aa445'
        }
        return (
            <div>
                <h1 style={myStyle}>Person Table</h1>
            </div>
        );
    }
}

class TableRow extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.data.id}</td>
                <td>{this.props.data.name}</td>
                <td>{this.props.data.age}</td>
            </tr>
        );
    }
}

export default App;

此代码仅显示clera文本而不是表格列和行：/这可能只是简单的事情。

Answer 1

vanilla ReactJS中的表格与HTML中的表格相同。 See here

使用th标记创建列名称。您还需要一行（tr）。在您的情况下，代码将如下所示：

<table>
          <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
          </tr>
         <tr>
                <td>{this.props.data.id}</td>
                <td>{this.props.data.name}</td>
                <td>{this.props.data.age}</td>
            </tr>
        </table>

因此，您需要添加自己的样式才能显示边框和其他任何内容。

对于您的情况，我会在table和td标签中说明，您需要添加边框样式：

table, td {
    border: 1px solid black;
}

然而，这将使边框内的所有内容都有点紧张，所以也给它们一些填充：

td {
  padding: 10px
}

编辑：这是一个更好的表格版本：

＆＃13;

class App extends React.Component {
  render () {
    return (
      <div>
        <table>
          <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
          </tr>
         <tr>
                <td>this.props.data.id</td>
                <td>this.props.data.name</td>
                <td>this.props.data.age</td>
            </tr>
        </table>
      </div>
    )
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

＆＃13;

table, td, th {
    border: 1px solid black;
}

td {
  padding: 10px
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 2

你可以这样做，这是动态创建表的最简单方法。如果要添加更多列，则还要添加相同数量的td。如果你想在你的桌子上添加样式，请看看 Bootstrap Table

<table>
 <thead>
  <tr>
   <th>
     COLUMN NAME
   </th>
  </tr>
 </thead>
<tbody>
 {
   data.map((item,index)=>{
     return(<td key={index} > {item} </td>) 
   })
 } 
</tbody>
</table>

Answer 3

您需要表格列标题

<th>Col name 1</th>

这是一个例子

React JS第一个表

3 个答案: