如何解决React Native:功能组件中的getter函数?
我是React / React Native的新手,在将函数值返回到我的模板时遇到问题。我的组件是一个功能组件,它接收一个名为 Page {
id: firstPage
clip: true
Button {
id: button
implicitWidth: 100
implicitHeight: 50
text: "button"
}
}
的道具。经过简单的计算,我从该项目中检索了一个值,但是尝试在模板中返回该值的每种方式都会遇到不同的错误。
我最后一次尝试的是:
item
在这样的模板中:
getMaxPercent()
{
let max = _.maxBy(props.item.discounts,function(discount) {
return discount.sale;
});
return max;
}
我也尝试过:
<Text style={{ fontSize:17,color:'white',fontWeight:'bold' }}>
{ getMaxPercent() }% Off
</Text>
来自vue背景的反应似乎很……冗长。是否有等效于计算属性的反应?
解决方法
尝试一下,
function getMaxPercent()
{
let max = _.maxBy(props.item.discounts,function(discount) {
return discount.sale;
});
return max.sale;
}
参考-https://www.geeksforgeeks.org/lodash-_-maxby-method/
,是否有等效于计算属性的反应?
与计算属性等效的React只是在组件函数主体中声明的标准变量。该函数在每次更改道具时都会运行,因此将重新计算这些道具。
您根本不需要其他功能-您可以直接将max
分配给变量。
const Component = (props) => {
const max = _.maxBy(props.item.discounts,function(discount) {
return discount.sale;
});
return (
<Text style={{ fontSize:17,color:'white',fontWeight:'bold' }}>
{ max }% Off
</Text>
);
};
,
如果您不希望依赖lodash,则可以滚动自己的简单max finder返回最大的sale
属性。
const getMaxPercent = (discounts) =>
Math.max(...discounts.map(({ sale }) => sale));
const getMaxPercent = (discounts) =>
Math.max(...discounts.map(({ sale }) => sale));
const discounts = [
{
id: 0,sale: 3.5
},{
id: 1,sale: 13.5
},{
id: 2,sale: 13
},{
id: 3,sale: 10
},{
id: 4,sale: 7.8
}
];
console.log(getMaxPercent(discounts));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。