如果我创建一个辅助函数来整理React组件的内部逻辑,那么直接引用其中一个道具可以吗?还是那是代码的味道,我是否应该将该道具作为一个额外的参数传递,以便具有纯函数?
具有非纯辅助功能的组件的设计示例:
function SomeBankComponent({ accountData }) {
const getMessage = () => {
if (accountData.frozen) {
const message = "your account is frozen";
} else {
const message = `you have ${accountData.savings} left in your account`;
}
return message;
};
// ... rest of the component ...
在上面,将其更改为const getMessage = (accountData) => {
是否明智?还是仅仅是个人/团队/项目风格的偏好问题?
没问题,实际上在组件的辅助函数中直接引用状态和某些给定的道具是正常的。
下面,它是一个小的重构,更多是一个优先事项:)
const getMessage = () => (
accountData.frozen
? 'your account is frozen'
: `you have ${accountData.savings} left in your account`
)