反応中の汎用コンポーネント

Question

テーブルをレンダリングする汎用コンポーネントを作成したいと思います。問題は、各テーブルが毎回異なる情報を持たなければならないということです。たとえば、ユーザーのテーブル（ユーザー名と電子メールフィールド）と会社のテーブル（companyName、country、numberofEmployeesフィールド）のレンダリングに同じコンポーネントを使用したいとします。私はこれを行う方法について考えているが、私はReactの初心者なので何か助けが必要だ。

Answer 1

テーブルコンポーネント全体を構築することができる人はいませんが、テーブルコンポーネントを作成して構成可能な方法でビルドすることをお勧めします。つまり、どのように見えるかは小道具に基づいています通常は考慮する必要があり、一度構築してからコードを表示すると、ここではより便利になります。

何かをすばやく必要とする場合は、これを処理するサードパーティのライブラリもあります。それ以外の場合は、自分で構築し、Reactを学んで楽しんでください。 http://griddlegriddle.github.io/Griddle/ Griddleは私が以前使用していたライブラリです。

Answer 2

簡単な例使用して、テーブルとテーブルをレンダリングする一般的なコンポーネントを作成するために、反応：

テーブルをレンダリングする汎用コンポーネント

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;