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

如何传递道具以仅显示表格中的某些列？

1 个答案: