反应中的通用成分

Question

I want to create a generic component that renders a table. The issue is that each table shall have different information each time. For example I want to use the same component for rendering a table of users (with fields username and email) and a table of companies (with fields: companyName, country, numberofEmployees). I have an idea on how to do this, but since I am a beginner in React I need some help.

Answer 1

While no one here is going to be able to walk you through building an entire Table component, I would suggest making a Table component and build it in a composable way, meaning what it looks like will be based off the props are passed in. There is usually a lot to consider and once you start building it and have code to show then we can be more useful to you here.

There are also third party libraries that handle this for you if you are needing something quickly. Otherwise, build it yourself and have fun while learning React. http://griddlegriddle.github.io/Griddle/ Griddle is a library i have used before and it got the job done.

Answer 2

a simple example using react to create a table and a generic component that renders a table:

a generic component that renders a table

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;