Reactjs react中的通用组件

我想创建一个呈现表的通用组件。问题是每个表每次都有不同的信息。例如，我希望使用相同的组件来呈现用户表（包含用户名和电子邮件字段）和公司表（包含公司名称、国家/地区、numberofEmployees字段）。我有一个想法，但是因为我是React的初学者，我需要一些帮助。

虽然这里没有人能够指导您构建整个表组件，但我建议创建一个表组件并以可组合的方式构建它，这意味着它的外观将基于传递的道具。通常有很多事情要考虑，一旦你开始建立它，并有代码显示，那么我们可以在这里对你更有帮助。

---

如果您需要一些快速的信息，也有第三方库可以为您处理这些信息。否则，你可以自己构建它，并在学习时享受乐趣。Griddle是我以前使用过的一个图书馆，它完成了这项工作

使用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;

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{“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={
尺寸：16，
颜色：“#AF0000”
}A
返回(
{this.state.data.map（（person，i）=>）}
);
}
}
类头扩展了React.Component{
render（）{
var myStyle={
尺寸：20，
颜色：“#FF0000”
}
返回(
我在React中的新表格示例
);
}
}
类TableRow扩展了React.Component{
render（）{
var myStyle={
尺寸：12，
颜色：“#AF0000”
}
返回(
身份证件：
{this.props.data.id}
姓名：
{this.props.data.name}
年龄：
{this.props.data.age}
);
}
}
导出默认应用程序；

mate此网站更多用于直接提问，而不是完整的演练。例如：“当我接收到新状态时，如何在react中重新呈现我的表”。