javascript - 将类转换为 const 无状态函数
问题描述
您好,下面我有一个不使用任何生命周期方法或状态的类,我已阅读有关将此类类转换为 const 的文档。但是,我不确定我似乎如何与以下课程作斗争:
class ContractsTableHead extends Component {
createSortHandler(property) {
return event => {
this.props.onRequestSort(event, property);
};
}
render() {
const { order, orderBy } = this.props;
return (
<TableHead>
<TableRow>
{rows.map(
row => (
<TableCell
key={row.id}
align={row.numeric ? "right" : "left"}
padding={row.disablePadding ? "none" : "default"}
sortDirection={orderBy === row.id ? order : false}
>
<Tooltip
title="Sort"
placement={row.numeric ? "bottom-end" : "bottom-start"}
enterDelay={300}
>
<TableSortLabel
active={orderBy === row.id}
direction={order}
onClick={this.createSortHandler(row.id)}
>
{row.label}
</TableSortLabel>
</Tooltip>
</TableCell>
),
this
)}
</TableRow>
</TableHead>
);
}
}
ContractsTableHead.propTypes = {
onRequestSort: PropTypes.func.isRequired,
order: PropTypes.string.isRequired,
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired
};
export default ContractsTableHead;
解决方案
如果将类组件变成函数组件,则还需要将方法createSortHandler
变成常规函数:
const ContractsTableHead = props => {
const createSortHandler = property => {
return event => {
props.onRequestSort(event, property);
};
};
const { order, orderBy } = props;
return (
<TableHead>
<TableRow>
{rows.map(row => (
<TableCell
key={row.id}
align={row.numeric ? "right" : "left"}
padding={row.disablePadding ? "none" : "default"}
sortDirection={orderBy === row.id ? order : false}
>
<Tooltip
title="Sort"
placement={row.numeric ? "bottom-end" : "bottom-start"}
enterDelay={300}
>
<TableSortLabel
active={orderBy === row.id}
direction={order}
onClick={createSortHandler(row.id)}
>
{row.label}
</TableSortLabel>
</Tooltip>
</TableCell>
))}
</TableRow>
</TableHead>
);
};
推荐阅读
- vue.js - 在使用 vue js 的导入文件中使用连接
- vbscript - 如何在VBScript中运行与for循环相关的文本?
- json - 如何使用 Spark 和 Spray Json 读取 json 文件并转换为案例类
- android - 在 NestedScrollView 中使用 ListView 无法正常工作
- octobercms - 我们如何在 october cms 中使用或条件来检查页面
- python - 如何在django中制作html文件特定部分的pdf
- domain-driven-design - 如何区分Entity和ValueObject?
- javascript - javaScript - dispatchEvent(事件)不起作用
- java - CannotCreateTransactionException:无法为事务打开 Hibernate Session;JDBCConnectionException:无法打开连接
- selenium - 单击与其他图像具有相同 src 且在 Selenium 中没有 href 的相同图像