javascript - 使用 getter 在 React 组件中渲染另一个组件是一种好习惯吗?
问题描述
在某些情况下,getter 方法变得很方便。但是使用 getter 方法来渲染 React 组件或整个 DOM 呢?为此目的使用经典方法而不是吸气剂不是更好吗?为什么?
我有一种感觉,在这方面有些不妥,但我也知道这东西可能是关于作者的感受。
所以问题是这是否是一个好方法?或者你的偏好是什么?
class Attachment extends React.Component {
get file() {
return this.props.fields.File;
}
get label() {
return this.props.fields.Label;
}
// I'm asking about these 2 getters below this comment
get editableAttachment() {
return <SomeComponent field={this.label} />;
}
get attachment() {
return (
<a
href={this.file && this.file.value && this.file.value.src}
target="_blank"
>
{(this.label && this.label.value)}
</a>
);
}
render() {
return (
<div className="ui-some-component">
{this.props.isPageEditing ? this.editableAttachment : this.attachment}
</div>
);
}
}
先感谢您。
解决方案
这非常符合消费者的口味,我相信如果你不引入野蛮,任何代码都是好的。
代码越容易理解越好,这也是事实。对于不知道我的代码的人,我会尝试使代码尽可能简单易读。
另一方面,我尝试使组件尽可能简单和具有代表性。
也许这将是您自己使用“我的风格指南”的代码示例:
const Attachment = ({ isPageEditing, fields }) => {
const { file, label } = fields;
const attachment = isPageEditing ? (
<SomeComponent field={fields.label} />
) : (
<a href={file && file.value && file.value.src} target="_blank">
{label && label.value}
</a>
);
return <div className="ui-some-component">{attachment}</div>;
};
我希望我能帮助你,最好的
推荐阅读
- c - 雷区C矩阵
- php - 如何仅显示包含特定值的所有文章?
- javascript - 如何设置动态document.title?
- r - 在密度向量上调用 sapply?
- c++ - 矩阵报告 Mismatched free() / delete / delete []
- sas - SAS Proc Freq 2 路表删除行和列总计
- c# - 将 PPK 文件硬编码到我的代码中是否安全?
- python - 从系统终端而不是 vscode 运行时,不遵守 QSystemTrayIcon 大小
- c++ - 如何计算这样的程序的复杂度
- node.js - 如何使 Swagger UI 接受带有可选字段的请求正文