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

映射无线电输入时模块构建失败

1 个答案: