javascript - React 组件利用率

Question

我尝试在我的文件中使用以下组件，但无法按照组件的要求格式化选项。这是新的...任何有关如何修复我的代码的想法将不胜感激。组件下面的 Field 是我尝试使用它的方式。

/**
* Single select dropdown component
* - Uses an array passed to options prop
* - 'options' Array must have 'value' (what is submitted) & 'text' 
(what is displayed)
*/
export class SingleSelect extends React.Component {
render () {
    const {
        input,
        label,
        options,
        required,
        placeholder,
        meta: { error, warning, touched },
        ...props
    } = this.props;

    let message;
    const validationState = touched && ( error && 'error' ) || ( warning && 'warning' ) || null;

    if ( touched && ( error || warning ) ) {
        message = <span className="help-block">{ error || warning }</span>;
    }

    let placeholderText = 'Select an option';
    if ( placeholder ) {
        placeholderText = placeholder;
    }

    const asterisk = required && (<span className="form-field-required" />) || null;

    return (
        <FormGroup validationState={ validationState }>
            <ControlLabel>
                { label }
                { asterisk }
            </ControlLabel>

            <FormControl {...{
                ...input,
                componentClass: 'select',
                placeholder: placeholderText,
                ...props
            }} >
                <option value="">{ placeholderText }</option>
                {
                    options.map((option, index) => (
                        <option key={index} value={option.value}>
                            {option.text}
                        </option>
                    ))
                }
            </FormControl>
            { message }
            <FormControl.Feedback />
        </FormGroup>
    );
}
}

<Field
 name="type"
 label="Type"
 component={fields.SingleSelect}
  options={
     text=[Media File, External File]
     value=type
  }
  required
  placeholder
  validate={[validators.required]}
 />

Answer 1

您在传递的对象周围需要额外的 {}:

<Field
  name="type"
  label="Type"
  component={fields.SingleSelect}
  options={[{
     text: 'Media File'
     value: type
  },{
     text: 'External File'
     value: type
  }]}
  required
  placeholder
  validate={[validators.required]}
/>

在 JSX 中，第一个 {} 表示里面是需要运行的 JavaScript。因此，您可以考虑忽略第一个 {}。