具有动态内容 ReactJS 的表格答案

【问题标题】：Table with dynamic content ReactJS具有动态内容 ReactJS 的表格
【发布时间】：2020-05-14 16:12:51
【问题描述】：

我正在尝试呈现一个包含动态内容的表格，该表格由具有显示更多/显示更少功能的对象数组组成。

虽然我能够显示动态内容，但我无法引入显示更多/显示更少切换。基本上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;

【问题讨论】：

到目前为止，您为显示更多/更少功能尝试了什么？看起来此代码用于显示所有行。

标签： javascript reactjs ecmascript-6 ecmascript-5 setstate

【解决方案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;

【讨论】：

打我一拳！如果您想玩几乎相同的版本，请参阅codesandbox.io/s/react-basic-class-component-hebyn?file=/src/…
听到你说这让我很开心 :)
谢谢你们两个:)
我建议您遵循 @Jacob 的解决方案，因为它在表格渲染期间看起来更干净，因为他在调用 .map 并返回元素之前设法对数组进行切片。
如何动态打印值，<td>{name}</td> <td>{value}</td> 基本上我们是硬编码名称和值

【解决方案2】：

添加并处理了这个状态： this.state = { 显示更多：假，显示：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

【讨论】：