我的 React 组件中有一个渲染方法。我想显示一个特定的 URL,具体取决于 Prop 的值(value)。因此,我创建了一个对象数组,对应于我的 Prop 值选项,以及每个对象的 URL。
const SecurityModeOptions: any[] = [
{ securityMode: 'mode1', url: 'https://docs.mode1' },
{ securityMode: 'mode2', url: 'https://docs.mode2' },
{ securityMode: 'mode3', url: 'https://docs.mode3' }
];
renderBasicMode = () => {
const { securityMode } = this.props;
const getSecurityModeURL = SecurityModeOptions.filter(
url => SecurityModeOptions.SecurityMode === securityMode
);
return (
<div>
<NoResource
icon="user-o"
title="Security Mode"
moreUrl={getSecurityModeURL()}
/>
</div>
);
};
所以,我制作了这个过滤器函数,我在 moreUrl
属性中调用它。问题是在接下来的几天里,我没有办法测试这个功能是否有效。所以,我在想,如果你能看一下并告诉我它是否有问题。
我感觉我做了一些奇怪的事情,但我没有收到任何错误,而且我不确定我是否做对了。将是一个巨大的帮助。
预期行为:
如果 SecurityModeOption
中的 securityMode 与 this.props.securityMode
匹配,则会在 moreUrl 属性中看到相应的 URL。
最佳答案
这有几个问题。 getSecurityModeURL
将解析为一个数组,而不是一个函数。因此,如果在子项中调用 moreUrl={getSecurityModeURL()}
行,最终将导致错误。
如果您希望 getSecurityModeURL
解析为单个对象,您需要使用 .find
而不是 .filter
。所以最终看起来像:
const getSecurityModeURL = SecurityModeOptions.find(
x => x.SecurityMode === securityMode
);
然后传给 child
moreUrl={getSecurityModeURL.url || ''}
就测试而言,看起来你有样本数据,你为什么不能用它来测试呢?其他一切看起来都很好。
关于javascript - 我如何过滤数组并返回正确的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55580363/