Question

我在反应

中收到以下错误

预期的令牌，预期......（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;

[问题] ：有人可以告诉我，我做错了什么？如果我需要分享其他内容，请告诉我

Answer 1

你忘了关闭第一个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;

Answer 2

请关闭元素

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

意外的令牌，预计......

2 个答案: