javascript - 映射 radio 输入时模块构建失败

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

react 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>
    )
})}