Table 动态内容 ReactJS

Question

我正在尝试呈现 table 动态内容，其中包含具有显示更多/显示更少功能的对象数组。

虽然我能够显示动态内容，但我无法引入显示更多/显示更少切换。基本上 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 的状态来管理 table 的显示方式

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, showing: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

Table 动态内容 ReactJS

Table with dynamic content ReactJS

javascript

setstate

ecmascript-5

ecmascript-6

reactjs