首页 > 解决方案 > 意外的令牌,预期的...

问题描述

我在反应中收到以下错误

意外的令牌,预期的...... (16:6)

 return (
  15 |   <div className={classes.BuildControls}
16 |     { controls.map(el =>(<BuildControl key={el.label} label={el.label} />))}
     |       ^
  17 |   </div>
  18 |  )
  19 | };

这是我的代码

import React from 'react';
import Classes from './build-controls.css';
import BuildControl from './build-control-r/build-control.js';

const controls = [
  { label: "Salad", type:"salad"  },
  { label: "Cheese", type:"cheese" },
  { label: "Meat", type:"meat" },
  { label: "bacon", type:"bacon" }
]


const buildControls = (props) => {
  return (
  <div className={classes.BuildControls}
    { controls.map(el =>(<BuildControl key={el.label} label={el.label} />))}
  </div>
 )
};

export default buildControls;

[问题]:有人可以告诉我我做错了什么吗?如果我还需要分享其他内容,请告诉我

标签: javascriptreactjs

解决方案


您忘记关闭第一个 div。

import React from 'react';
import Classes from './build-controls.css';
import BuildControl from './build-control-r/build-control.js';

const controls = [
  { label: "Salad", type:"salad"  },
  { label: "Cheese", type:"cheese" },
  { label: "Meat", type:"meat" },
  { label: "bacon", type:"bacon" }
]


const buildControls = (props) => {
  return (
  <div className={classes.BuildControls}>  //This one right arrow
    { controls.map(el =>(<BuildControl key={el.label} label={el.label} />)) }
  </div>
)
};

export default buildControls;

推荐阅读