Question

因此，我在render()方法内部，创建了一些<select>。我想选择一个默认值，但仅当它不是<select multiple>时。我尝试了此操作，但在标题中遇到了错误。我该如何正确编码？

<select key={setting.id} multiple={setting.multiple} {setting.multiple ? '' : 'value={setting.default || ""}'}><select>
                                                      ^ error occurs here

编辑：

在选择<select multiple>来减轻The value prop supplied to <select> must be an array if multiple is true.警告的情况下，select根本没有值属性很重要。

Answer 1

如下所示可以解决您的问题：

render(){
      let selValue = "";
      if(setting.multiple)
        val = setting.default;
      return(
        <select key={setting.id} multiple={setting.multiple} value={selValue}><select>
      )
    }

编辑： 根据您的需要，您还可以使用以下代码：

let select = (<select key={setting.id} multiple={setting.multiple} value={setting.default}><select>)
if(setting.multiple)
  select = (<select key={setting.id} multiple={setting.multiple}><select>)

Answer 2

在JSX中，{}不会像许多模板语言一样输出字符串，您需要将其视为左属性为赋值的赋值，例如multiple=，右侧是一个JavaScript表达式，该表达式返回要分配的值，例如{ setting.multiple }-它被评估并分配给multiple属性。

现在根据setting属性设置值，只需遵循相同的逻辑即可：

<select value={ setting.multiple ? [] : (setting.default || "") } />

编辑：解释为什么错误显示expected "..."。如果{}不在分配的右侧，则可能需要分布多个属性，例如
const props = { value: "foo", name: "myInput" }; <select {...props } />。

Answer 3

这种方式怎么样？

setting.multiple
? <select key={setting.id} multiple={setting.multiple}></select>
: <select key={setting.id} multiple={setting.multiple} value={setting.default || ""}</select>

反应：解析错误：意外的令牌，预期为“ ...”

3 个答案: