具有动态内容的表ReactJS

Question

我正在尝试使用具有Show More / Show Less功能的对象数组组成的动态内容呈现表。

虽然我可以显示动态内容，但无法引入Show More / Show less切换。基本上，Show More应在项目数大于3时显示，并且应将其余项目附加到前三个项目中。 Show Less应该能够隐藏项目并仅显示前三个

将不胜感激。

沙盒：https://codesandbox.io/s/react-basic-class-component-3kpp5?file=/src/Table.js

我尝试过的方法

import * as React from "react";

class Table extends React.Component {
  renderTableData = () => {
    return this.props.data.map((item, index) => {
      const { name, value } = item;
      return (
        <tr key={index}>
          <td>{name}</td>
          <td>{value}</td>
        </tr>
      );
    });
  };

  renderTableHeader = () => {
    let header = Object.keys(this.props.data[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  };

  render() {
    return (
      <div>
        <table>
          <tbody>
            <tr>{this.renderTableHeader()}</tr>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;

Answer 1

从您的代码中，我添加了一个名为showLess的状态来管理表的显示方式

import * as React from "react";

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showLess: true
    }
  }
  renderTableData = () => {
    return this.props.data.map((item, index) => {
      // If it's show less, then it should show only 3 rows, the others we will return null
      if (this.state.showLess && index > 2) return null; 
      const { name, value } = item;
      return (
        <tr key={index}>
          <td>{name}</td>
          <td>{value}</td>
        </tr>
      );
    });
  };

  renderTableHeader = () => {
    let header = Object.keys(this.props.data[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  };

  toggleShowLess = () => {
    this.setState(prevState => ({
      showLess: !prevState.showLess
    }));
  }

  render() {
    return (
      <div>
        <table>
          <tbody>
            <tr>{this.renderTableHeader()}</tr>
            {this.renderTableData()}
            <a href="#" onClick={this.toggleShowLess}>
              {this.state.showLess ? 'Show More' : 'Show Less'}
            </a>
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;

Answer 2

已添加并处理此状态：this.state = {showMore：false，显示：DEFAULT_NUMBER_OF_ELEMS_TO_SHOW}

import * as React from "react";

const DEFAULT_NUMBER_OF_ELEMS_TO_SHOW  = 3;
class Table extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      showMore:false,
      showing:DEFAULT_NUMBER_OF_ELEMS_TO_SHOW
    }
  }
  renderTableData = () => {
    const {data} = this.props;
    const {showing} = this.state;
    let out = []
    for(let i = 0; i<showing;i+=1){
      const { name, value } = data[i];
      out.push(( <tr key={i}>
        <td>{name}</td>
        <td>{value}</td>
      </tr>))
    }
    return out;
  };

  renderTableHeader = () => {
    let header = Object.keys(this.props.data[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  };

  setShownTableData = () =>{
    const {showing,showMore} = this.state;;
    const {data} = this.props;
    this.setState({showMore:!showMore,
      showing: showing === DEFAULT_NUMBER_OF_ELEMS_TO_SHOW ? data.length:DEFAULT_NUMBER_OF_ELEMS_TO_SHOW});

  }

  render() {
    return (
      <div>
        <table>
          <tbody>
            <tr>{this.renderTableHeader()}</tr>
            {this.renderTableData()}
          </tbody>
        </table>
        <div onClick={()=>this.setShownTableData()}>{this.state.showMore ? "Show more":"Show Less"}</div>
      </div>
    );
  }
}

export default Table;

https://codesandbox.io/s/react-basic-class-component-dp21g?file=/src/Table.js