Question

我在React Hooks和Functional Components上还很新。如果有人愿意帮助您，我将不胜感激。我已经在这工作了几个小时了。

如何将使用类组件的下表转换为使用功能组件的表


class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: [
        { title: "Clients", view: 1, total: 20 },
        { title: "Returning Players", view: 3, total: 18 },
        { title: "New Players", view: 3, total: 20 },
        { title: "Pending Players", view: 4, total: 10 },
        { title: "Players who left", view: 3, total: 11 },
        { title: "Total Players", view: 15, total: 79 }
      ]
    };
  }

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

  PlayersTableData() {
    return this.state.status.map((status, index) => {
      const { title, view, total } = status; 
      return (
        <tr key={index}>
          <td>{title}</td>
          <td>{view}</td>
          <td>{total}</td>
        </tr>
      );
    });
  }

  render() {
    return (
      <div>
        <table id="status">
          <tbody>
            <tr>{this.PlayersTableHeader()}</tr>
            {this.PlayersTableData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;

Answer 1

import React, { Component, useState } from "react";

const Table = () => {
  const [state, setState] = useState({
    status: [
      { title: "Clients", view: 1, total: 20 },
      { title: "Returning Players", view: 3, total: 18 },
      { title: "New Players", view: 3, total: 20 },
      { title: "Pending Players", view: 4, total: 10 },
      { title: "Players who left", view: 3, total: 11 },
      { title: "Total Players", view: 15, total: 79 }
    ]
  });

  const PlayersTableHeader = () => {
    let header = Object.keys(state.status[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  };

  const PlayersTableData = () => {
    return state.status.map((status, index) => {
      const { title, view, total } = status;
      return (
        <tr key={index}>
          <td>{title}</td>
          <td>{view}</td>
          <td>{total}</td>
        </tr>
      );
    });
  };

  return (
    <div>
      <table id="status">
        <tbody>
          <tr>{PlayersTableHeader()}</tr>
          {PlayersTableData()}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

React Hooks是一个功能强大的工具。检查this供参考

现在要在表格功能中设置状态：

setState({ status: customStatus })

Answer 2

为了便于阅读，我将功能组件分为三个不同的文件：您的mainfile.js模仿了上面的类Table组件，一个playerstabledata.js文件引入了PlayersTableData（）组件，以及引入PlayersTableHeader（）的playerstableheader.js文件；现在，在mainfile.js内：

import React, { useState } from "react";
import PlayersTableHeader from "./playerstableheader.js";
import PlayersTableData from "./playerstabledata.js";
const Table = (props) => {
   const [status, setStatus] = useState([
        { title: "Clients", view: 1, total: 20 },
        { title: "Returning Players", view: 3, total: 18 },
        { title: "New Players", view: 3, total: 20 },
        { title: "Pending Players", view: 4, total: 10 },
        { title: "Players who left", view: 3, total: 11 },
        { title: "Total Players", view: 15, total: 79 }
      ]);


    return (
    <div>
        <table id="status">
          <tbody>
            <tr><PlayersTableHeader status={status} /></tr>
            <PlayersTableData status={status} />
          </tbody>
        </table>
      </div>
);
};
export default Table;

在playerstableheader.js文件中：

const PlayersTableHeader = ({status}) =>{
 let header = Object.keys(status[0]);
    return header.map((key, index) => {
       <th key={index}>{key.toUpperCase()}</th>;
    });

};
export default PlayersTableHeader;

在playerstabledata.js中：

const PlayersTableData = ({status}) => {
 return status.map(({title, view, total}, index) => {
        <tr key={index}>
          <td>{title}</td>
          <td>{view}</td>
          <td>{total}</td>
        </tr>
    });

};
export default PlayersTableData;

请注意您如何将status状态传递给每个组件。希望这会有所帮助！

如何将类组件表转换为功能组件

2 个答案: