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

Question

我对 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;

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 是一个强大的工具。检查此内容以供参考

现在在表函数中设置状态：

setState({ status: customStatus })

Answer 2

为了可读性，我会将功能组件分成三个不同的文件：模仿你的类的mainfile.jsTable上面的组件，一个引入 PlayersTableData(( 组件的playerstabledata.js文件和一个引入 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状态传递给每个组件。希望这有帮助！