如何傳遞道具以僅顯示表格中的某些列？

Question

我正在使用JSON格式的數據顯示在表中。 傳遞道具以僅顯示（或不顯示）表中的某些列的最佳方法是什么？

 componentDidMount() {

   fetch('http://localhost:7000/worldStats')
  .then((data) => data.json())
  .then((data) => this.setState( { stats: data } ));
 }

 render(){
 return(

 // Table..
 {this.state.stats.map( (item) => {
 // Items..
   <td>{item.ID}</td>
   <td>{item.CURRENCY}</td>
   <td>{item.NAME}</td>
   <td>{item.GDP}</td>
   <td>{item.POP}</td>
 })}
 )

Answer 1

考慮到您正在呈現一個表，並且您要做的就是切換要顯示的列，我認為將所有邏輯保留在一個組件中是很有意義的。 這意味着無需將道具從一個組件傳遞到下一個組件。 相反，我們將僅利用組件狀態。

考慮以下代碼：

import React from "react";

class Table extends React.Component {
  state = {
    stats: [],
    indexOfFirstExtendedField: 2,
    displayExtendedFields: true
  };

  componentDidMount() {
    const newData = [
      {
        id: 1,
        currency: "USD",
        name: "dollars",
        gdp: "alot",
        pop: "alot"
      },
      {
        id: 2,
        currency: "MEX",
        name: "pesos",
        gdp: "alot",
        pop: "alot"
      }
    ];
    this.setState({
      stats: newData
    });
  }

  toggleDisplay = () => {
    this.setState(prevState => {
      return {
        displayExtendedFields: !prevState.displayExtendedFields
      };
    });
  };

  createTableHeaders = () => {
    const {
      indexOfFirstExtendedField,
      stats,
      displayExtendedFields
    } = this.state;

    if (displayExtendedFields) {
      return Object.keys(stats[0]).map(key => {
        return <th>{key}</th>;
      });
    } else {
      return Object.keys(stats[0])
        .filter((key, index, array) => {
          return array.indexOf(key) < indexOfFirstExtendedField;
        })
        .map(key => {
          return <th>{key}</th>;
        });
    }
  };

  createTableContent = () => {
    const {
      indexOfFirstExtendedField,
      stats,
      displayExtendedFields
    } = this.state;

    if (displayExtendedFields) {
      return stats.map(item => {
        return (
          <tr>
            {Object.values(item).map(value => {
              return <td>{value}</td>;
            })}
          </tr>
        );
      });
    } else {
      return stats.map(item => {
        return (
          <tr>
            {Object.values(item)
              .slice(0, indexOfFirstExtendedField)
              .map(value => {
                return <td>{value}</td>;
              })}
          </tr>
        );
      });
    }
  };

  render() {
    const { stats, displayExtendedFields } = this.state;
    return (
      <div>
        <button onClick={this.toggleDisplay}>
          {displayExtendedFields ? "Collapse" : "Expand"}
        </button>
        <table>
          {stats.length > 0 && this.createTableHeaders()}
          {stats.length > 0 && this.createTableContent()}
        </table>
      </div>
    );
  }
}

export default Table;

這里主要的外賣是，我們使用了兩個額外的狀態值，以幫助我們確定要顯示的字段， indexOfFirstExtendedField和displayExtendedFields 。 這有助於我們擴展和折疊列。

這也是codeandbox，因此您可以在操作中看到它： https ://codesandbox.io/s/v3062w69v0