Как преобразовать таблицу компонентов класса в функциональный компонент - PullRequest
Новая
       1

Как преобразовать таблицу компонентов класса в функциональный компонент

0 голосов
/ 28 мая 2020

Я новичок в React Hooks и функциональных компонентах. Если бы кто-нибудь был так добр, чтобы помочь, я был бы очень признателен. Я работаю над этим уже несколько часов.

Как превратить следующую таблицу, в которой используются компоненты класса, в таблицу, в которой используются функциональные компоненты 


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;

Ответы [ 2 ]

0 голосов
/ 28 мая 2020

Я бы разделил функциональные компоненты для удобства чтения на три разных файла: ваш mainfile.js, который имитирует ваш компонент класса Table выше, файл playerstabledata.js, который включает компонент PlayersTableData (), и файл playerstableheader.js, который вводит PlayersTableHeader (); Теперь внутри 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 каждому компоненту. Надеюсь, это поможет!

0 голосов
/ 28 мая 2020 
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 })
...