![](/img/trans.png)
[英]How to render an array of components (objects) with specific props in React?
[英]deconstruct array of objects and checking for objects props to render Components
我试图做一个非常简单的函数来检查对象数组中的道具并根据道具是否具有值“电话”返回一个组件,但我努力不理解如何解构我的对象数组。 我的对象数组如下所示:
{format: "text", multivalue: false, metaInformation: Array(2), optional: false, deprecated: false, …}
{format: "text", multivalue: false, metaInformation: Array(1), optional: true, deprecated: false, …}
{format: "phone", multivalue: false, metaInformation: Array(1), optional: false, deprecated: false, …}
{format: "phone", multivalue: false, metaInformation: Array(2), optional: true, deprecated: false, …}
{format: "textarea", multivalue: false, metaInformation: Array(2), optional: true, deprecated: false, …}
{format: "boolean", multivalue: false, metaInformation: Array(2), optional: true, deprecated: false, …}
首先,我要返回我的元素(根据格式,将一个组件元素替换为另一个:
const LabeledInput = ({Component, label, name, mandatory, valid,
...rest}) => {
return (
<div className="label-input mb-2 form-group">
<Label htmlFor={name} mandatory={mandatory}>
{label}
</Label>
<Component name={name} mandatory={mandatory} valid={valid}
{...rest} /> <----*** this is the component that replace elements
<div className="invalid-feedback">
<FormattedMessage id="header.settings.profile.invalid.feedback" />
</div>
</div>
);
};
我试图从我的对象数组中获取“格式”道具以呈现这个特殊的组件,以防格式为“电话”。 所以我制作了我的“PhoneNumberInput”组件:
const PhoneNumberInput = ({value, onChange, valid, ...rest}) => {
return (
<Input
className={classNames('form-control ', {
'is-invalid': !valid,
})}
type='tel'
value={value}
onChange={onChange}
valid={valid}
placeholder={'phone'}
{...rest}
/>
)
}
然后我有一个非常相似的没有type='tel'
的所有其他格式。 然后,在我的render()
我声明了我的函数,该函数将检查对象中的道具“格式”并返回所需的组件......像这样:
const {customFields} = this.props;
const {format: format} = customFields || {};
const lookupComponent = (format) => {
console.log('the format is this: ====>', customFields)
if (format === 'phone') {
console.log('there are some')
return <PhoneNumberInput key={format}/>
} else {
return <Input key={format}/>;
}
}
customFields 是我的对象数组,最后我有返回输入的组件
return (
<LabeledInput
Component={lookupComponent} <---- I run my function
here
name={cf.id}
key={index}
mandatory={!cf.optional}
valid={this.customValid(cf.id)}
label={metaHash.get('label')}
value={this.state.customFields[cf.id]}
onChange={e => this.customChange(e, cf.id)}
/>
);
问题是没有检查我的对象数组“customFields”中的属性格式,我尝试映射它们并得到某种工作但不是真的......因为它遍历了每个元素中的所有输入。 (我试过这个:)
const lookupComponent = customFields.map((data) => {
console.log('the format is this: ====>', data.format) <--** In this case I've got the formats but itinerated for all the objects in the Array.
if (data.format === 'phone') {
console.log('there are some')
return <PhoneNumberInput key={format}/>
} else {
return <Input key={format}/>;
}
})
那么如何从对象中获取“格式”道具并检查是否存在一种format === phone
,将电话输入呈现为正常输入? 提前感谢您的任何建议! 干杯!
我意识到我已经在正确的位置映射了对象,所以一旦我将它们映射到渲染函数以检查道具的组件就开始工作了! 所以,变化是这样的,在我检查格式的函数中,我传递了已经映射的对象:
const lookupComponent = cf => {
if (cf.format === 'phone') {
return PhoneNumberInput;
} else {
return Input;
}
};
而“cf”来自我现在正确的映射对象:
{customFields.map((cf, index) => {
const metaHash = cf.metaInformation.reduce((map, mi) => map.set(mi.name, mi.value), new Map());
return (
<LabeledInput
Component={lookupComponent(cf)}
name={cf.id}
key={index}....
所以我实际上不需要解构任何东西(或者至少不是第二次!)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.