Eslint在React組件中將字符串視為數組

Question

我在React組件中有以下代碼：

<select id='header-color'>
  {
    this.props.colors.map((color, i) => {
      return <option 
        value={color.value} 
        key={i} 
        {this.props.headerColor === color.value ? 'selected' : ''}>{color.name} 
      </option>
    })
  }
</select>

Eslint給我以下錯誤：

Parsing error: Unexpected token, expected "..."

this.props.headerColor已正確傳遞到組件中，其值應為字符串。 我在這里想念什么？

Answer 1

selected是一個具有布爾值的道具。 您可以將其更改為以下內容：

<select id="header-color">
  {this.props.colors.map((color, i) => {
    return (
      <option
        value={color.value}
        key={i}
        selected={this.props.headerColor === color.value}
      >
        {color.name}
      </option>
    );
  })}
</select>

Answer 2

您需要將語法更改為此：

 <select id='header-color'> { this.props.colors.map((color, i) => { return <option value={color.value} key={i} selected={this.props.headerColor === color.value}> {color.name} </option> }) } </select> 

因為selected是布爾屬性而不是字符串。

Answer 3

感謝那些回應。 這些答案確實很有幫助，使我找到了我認為是更好的解決方案。

似乎React確實希望我們使用defaultValue處理選擇狀態，並通過方法處理onChange事件，如下所示：

<select id='header-color' 
  defaultValue={this.props.headerColor} 
  onChange={this.handleSelectChange}>
  {
    this.props.colors.map((color, i) => {
      return <option value={color.value} key={i}>
        {color.name}
      </option>
    })
  }
</select>

對於onChange事件，我在上面添加了以下內容：

constructor(props) {
    super();
    this.state = {selectValue: props.headerColor}
    this.handleSelectChange = this.handleSelectChange.bind(this);
}

handleSelectChange(e) {
  this.setState({selectValue: e.currentTarget.value});
}