Таблица в Reactjs структуры данных

Question

У меня есть структура данных, таких как:

[{name: 'Test', age: '2', mod_ID: 1234, mod_name: 'hat}, {name: 'Test2', age: '3', mod_ID: 43123, mod_name: sat}] 

и другие, такие как:

[{color: 'blue', size: '56'},{color: 'red', size: '32'}] 

Мои реакции компонентов работы как таковой

import React, { Component } from 'react'; 

import Button from 'react-bootstrap/lib/Button'; 
import { Link } from 'react-router'; 


export default class DataTable extends Component { 
    constructor(props) { 
     super(props); 

     this.sortColumn = this.sortColumn.bind(this); 

    } 

    sortColumn(header){ 
     this.props.sortData(header); 
    } 

    displayHeaders(){ 
     return _.map(this.props.headers, (header, index) => <th onClick={()=>this.sortColumn(index)} 
                   key={header}>{header}</th>) 
    } 

    render() { 
     return(

      <table> 
       {/*Displays the headers*/} 
       <thead><tr><th></th>{this.displayHeaders()}</tr></thead> 
       {/*Displays the rows*/} 
       <DataRows rows={this.props.rows} form={this.props.form} /> 
       <Link to={{ pathname: "/NewEntry", query: {form: this.props.form}}}> 
       <Button>New</Button></Link> 
      </table> 
     ) 
    } 
} 

class DataRows extends Component { 
    constructor(props) { 
     super(props); 

    } 
    displayItems(){ 
     return _.map(this.props.rows, (row, index) => <DataField key={index.toString()} entry={row} 
                   form={this.props.form}/>) 
    } 
    render() { 
     return(<tbody>{this.displayItems()}</tbody>) 

    } 
} 

class DataField extends Component { 
    constructor(props) { 
     super(props); 


    } 

    displayItems() { 
     return _.map(this.props.entry, (field, index) => <td key={index.toString()}>{field}</td>) 
    } 


    render() { 
     return (<tr> 
      <EditButton entry={this.props.entry} form={this.props.form} /> 
      {this.displayItems()} 
     </tr>) 

    } 
} 

class EditButton extends Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (<Link to={{ 
       pathname: "/EditEntry", query: { 
        entry: JSON.stringify(this.props.entry), 
        form: this.props.form 
       } 
      }}> 
       <Button>Edit</Button> 
      </Link>) 
    } 
} 

и производит таблица

name age mod_id mod_name 
Test 2 1234 hat 
Test2 3 43123 sat 

Эта проблема заключается в том, что я не думаю о том, как аккуратно реагировать на создание пользовательского списка заголовков, отправлять исходный элемент для редактирования записи и исключать некоторые поля из структуры данных.

Я хочу, чтобы финальный стол выглядеть следующим образом:

Name Age Mod 
Test 2 hat 

но EditEntry необходимо передать оригинальный '{имя: 'Test', возраст: '2', mod_ID: 1234, mod_name:' шляпа } '

В C++ я бы создал класс для каждого объекта, содержащего заголовки, поля отображения и поля конца. Но без написания множества пользовательских инструкций «if» для каждого объекта, что является лучшим способом сделать это в JavaScript? Данные из записи редактирования поступают в базу данных mysql в виде набора.

Answer 1

Я бы просто создал ассоциативный массив, в котором есть ключ вашего имени свойства и значение того, что вы хотите заголовком заголовка.

Другими словами:

var headerArray = [{name: "Name", age: "Age", mod_name: "Mod"}]; 

обратите внимание, что я ушел из mod_id, так как вы не хотите, чтобы в вашей итоговой таблице. Теперь вы можете перебирать этот массив, либо аналогичным образом к вашим displayHeaders() или перебирая ваши объекты ключей:

Object.keys(headerArray).forEach(function(key, index) { 
    //return your <th> component here 
}, headerArray);