Question

我正在尝试做一个非常简单的功能来检查对象数组中的道具，并根据该道具是否具有值“ phone”返回一个Component，但是我在不理解如何解构我的对象数组的过程中苦苦挣扎。我的对象数组如下：

 {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>
  );
};

im试图从我的对象数组中获取“格式”属性，以在格式为“电话”的情况下呈现此特殊组件。因此，我制作了“ 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()内部，声明了要检查对象中属性“格式”的函数，并返回所需的Component ...，如下所示：

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，将电话输入呈现为普通输入？在此先感谢您的任何建议！干杯！

Answer 1

我意识到我已经在正确的位置映射了对象，所以一旦我将它们映射到了提供功能以检查道具的组件上，它们就开始起作用了！所以，变化是这样的，在检查格式的函数中，我传递了已经映射的对象：

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}....

所以我实际上不需要解构任何东西（或者至少不需要第二次！）

解构对象数组并检查对象道具以渲染组件

1 个答案: