Javascript 反应组分利用

我试图在我的文件中使用以下组件，但无法按照组件的要求格式化

选项

。新来的。。。任何关于如何修复我的代码的想法都将不胜感激。 组件网下方的

字段

是我试图使用它的方式

/**
* 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]}
 />

/**
*单选下拉组件
*-使用传递给选项属性的数组
*-“选项”数组必须具有“值”（提交的内容）和“文本”
（显示的内容）
*/
导出类SingleSelect扩展了React.Component{
渲染（）{
常数{
输入，
标签，
选项，
必修的，
占位符，
meta:{错误，警告，触摸}，
…道具
}=这是道具；
让信息；
const validationState=toucted&&（error&&“error”）| |（warning&“warning”）| | null；
如果（触摸&（错误| |警告））{
消息={错误| |警告}；
}
让占位符文本='选择一个选项'；
如果（占位符）{
占位符文本=占位符；
}
常量星号=必需&（）| | null；
返回(
{label}
{星号}
{占位符文本}
{
options.map（（选项，索引）=>(
{option.text}
))
}
{message}
);
}
}

您需要在正在传递的对象周围额外添加

{}

：

<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。因此，您可以考虑忽略第一个

{}

。

您需要在要传递的对象周围额外添加

{}

：

<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。因此，您可以考虑忽略第一个

{}

。

prop={{a:'b'}

。第一个大括号是JSX

invoke

东西，内部的

{}

是实际的对象。

prop={{a:'b'}

。第一个大括号是JSX

invoke

东西，内部的

{}

是实际的对象。谢谢！但是我得到了这个错误：“Uncaught TypeError:options.map不是一个函数”@user8227859，因为对象上没有

map

。您可能想在这里传递数组而不是object:options={[{text:[媒体文件，外部文件]值：type}，{text:[媒体文件，外部文件]值：type}@user8227859更新了答案，根据组件规格将选项转换为对象数组。谢谢！但是我得到了这个错误：“Uncaught TypeError:options.map不是一个函数”@user8227859，因为对象上没有

map

。您可能想在这里传递数组而不是object:options={[{text:[媒体文件，外部文件]值：type}，{text:[媒体文件，外部文件]值：type}@user8227859更新了答案，用于根据组件规格将选项转换为对象数组。