當映射無線電輸入時模塊建立失敗

Question

好的，所以這一直困擾着我好幾天，我還沒有找到答案。我想我正在做一些愚蠢的事情（我稱之爲「分號問題」），但我找不到它。我對React也是新手，所以如果我正在做一些完全錯誤的事情，請給我留言。

我收到以下錯誤，當我的WebPack編譯：

ERROR in ./src/client/app/components/SelectorComponent.jsx 
Module build failed: SyntaxError: Unexpected token, expected , (12:56) 

    10 |     console.log(race); 
    11 |     return (
> 12 |      <input type="radio" key={race._id}/>{race.raceDate} {race.location} {race.gender} {race.skill} {race.distance} 
    |              ^
    13 |    ) 
    14 |    })} 
    15 |   <input type="radio"/>Casper 2017<br/> 

這裏是我的組件，它生成錯誤：

import React from 'react'; 
class SelectorComponent extends React.Component { 
    render() { 
    return (
     <div id='selector-component'> 
     <h3>Race Selector</h3> 
     <form> 
      {this.props.races.map(function(race) { 
       console.log(race); 
       return (
        <input type="radio" key={race._id}/>{race.raceDate} {race.location} {race.gender} {race.skill} {race.distance} 
       ) 
      })} 
      <input type="radio"/>Casper 2017<br/> 
      <input type="radio"/>Laramie 2017 
     </form> 
     </div> 
    ); 
    } 
} 

export default SelectorComponent; 

下面是幾個想法事情的清單我曾嘗試過：

• 刪除'key'屬性（不修復錯誤）
• 使用段落標記（P）周圍的比賽數據（修正錯誤......但我們要使用的輸入標籤）

這是什麼使我相信周圍的東西我做錯了錯誤牯與輸入標籤。

如果您需要任何其他幫助，請讓我知道。

Answer 1

反應v15不允許返回多個父元素標記，這意味着如果您有多個元素，則應將這些元素包裝在父標記中。

在你的情況下，你有效地試圖返回幾個元素，因爲<input />和文本被視爲單獨的元素。你需要用父元素包裝這些元素。最常見的是用<span>或<label>標籤完成。

您的修改後的代碼：

{this.props.races.map(function(race) { 
    console.log(race); 
    return (
     <label> 
     <input type="radio" key={race._id}/>{race.raceDate} {race.location} {race.gender} {race.skill} {race.distance} 
     </label> 
    ) 
})}