Question

我想创建一个呈现表的通用组件。问题是每个表每次都应有不同的信息。例如，我想使用相同的组件来呈现用户表（包括字段用户名和电子邮件）和公司表（包括字段：companyName，country，numberofEmployees）。我知道如何做到这一点，但由于我是React的初学者，我需要一些帮助。

Answer 1

虽然这里没有人能够引导你构建整个Table组件，但我建议制作一个Table组件并以可组合的方式构建它，这意味着它将基于道具传递在。通常需要考虑很多，一旦你开始构建它并有代码显示，那么我们在这里对你更有用。

如果您需要快速处理，还有第三方库可以帮您处理。否则，自己构建它并在学习React时玩得开心。 http://griddlegriddle.github.io/Griddle/ Griddle是我以前用过的图书馆，它完成了工作。

Answer 2

使用react创建表和呈现表的通用组件的简单示例：

呈现表格的通用组件

import React from 'react';

class App extends React.Component {
   constructor(props){
     super(props);
     this.state = {
       data: [
         {"id": 1, "name": "Fofu", "age": "21"},
         {"id": 2, "name": "Lulu", "age": "31"},
         {"id": 3, "name": "Juju", "age": "41"},
         {"id": 4, "name": "Tolo", "age": "51"},
         {"id": 5, "name": "kiki", "age": "61"},
         {"id": 6, "name": "Lili", "age": "71"},
         {"id": 7, "name": "Jiji", "age": "81"},
         {"id": 8, "name": "Titi", "age": "91"}
       ]
     }
   }

  render() {
     var myStyle = {
       fontSize: 16,
       color: '#AF0000'
     }A
      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: '#FF0000'
     }
     return (
        <div>
           <h1 style = {myStyle}> My New Table Example in React</h1>
        </div>
     );
  }
}

class TableRow extends React.Component {
  render() {
     var myStyle = {
       fontSize: 12,
       color: '#AF0000'
     }
     return (
        <tr>
            <th>Id: </th>
           <td style = {myStyle}>{this.props.data.id}</td>
           <th>Name: </th>
           <td style = {myStyle}>{this.props.data.name}</td>
           <th>Age: </th>
           <td style = {myStyle}>{this.props.data.age}</td>
        </tr>
     );
  }
}
export default App;

响应中的通用组件

2 个答案: