将jsx放入类组件方法时出现React-jsx语法错误

在React类组件中，我在编写一个构建<select>下拉列表的方法，并且Babel发出错误。该错误是由于第一个<select>标记未关闭而引起的。我无法弄清楚这个正确的react-jsx语法。将jsx放入类组件方法时出现React-jsx语法错误

在下面的代码中，我试图将创建<select>的代码封装到组件类中的另一个方法中。如果我有这个功能只是建立选项，并把<select>和</select>围绕该功能（在渲染方法），它的工作原理，但我想把选定的值放入<select>标记，而不是使用if语句，加上保留它全部一起。

这是什么适当的语法？

谢谢...

与指向问题行注释代码：

render() 
{ 

function buildQtyOptions(isAvailable, qty) 
{ 
    var opts = []; 

    if(!isAvailable) 
    { 
     opts.push(<td></td>); 
     return opts; 
    } 

    {/* Uncommenting this next line causes the error because the select is unclosed */} 
    {/* opts.push(<select>) */} 

    for (var i=1; i < 11; i++) 
    { 
     if(i === parseInt(qty)) 
     { 
      opts.push(<option value={i} selected>{i}</option>); 
     } 
     else 
     { 
      opts.push(<option value={i}>{i}</option>); 
     } 
    } 

    {/* opts.push(</select>); */} 

    return opts; 
} 

{/* Other methods omitted here */} 

    return(
    <tr> 
    <td>{getImage(this.props.available)}</td> 
    <td>{this.props.name}</td> 
    <td> 
     {/* I want to move this and the closing select into the buildQtyOptions method */} 
     {/*<select> */} 
      { buildQtyOptions(this.props.available, this.props.years) } 
     {/*</select> */} 
    </td> 

    </tr>);

来源

2017-05-03 Jim Archer

JSX不是真正的标记，它是函数调用的语法糖。

<select></select>

成为

React.createElement('select');

也许这有助于理解为什么你不能真正独立的开始和结束的“标签”。你可能认为他们相当于我猜的括号。

相反，你可以做

return <select>{opts}</select>;

（这相当于return React.createElement('select', null, opts);）。

来源

2017-05-03 17:15:43

两个很好的答案，我希望我可以接受他们两个。谢谢菲利克斯和佩德罗。我本应该看到这一点。我知道巴别做了这个翻译，但是它的影响让我无法理解。我将更多地阅读React.createElement（）; –

试着做，一次就全部使用map而不是使用for -loop，像这样：

opts.push(
    <select> 
    { [...Array(10).keys()].map(x => x + 1).map((i) => { 
     if (i == parseInt(qty)) { 
      return <option value={i} key={i} selected>{i}</option>; 
     } else { 
      return <option value={i} key={i}>{i}</option>; 
     } 
     }); 
    } 
    </select> 
);

[...Array(10).keys()]生成一系列数字的技巧是从this answer。第一个map只是简单地偏移范围，以便从1到10而不是从0到9的数字，而第二个实际上会生成<option>组件。这是有效的，因为将组件的子项一次全部作为数组传递是有效的。

你不能这么做的原因是每个封闭的JSX标记对都被翻译成React.createElement调用，所以如果你不关闭JSX标记，JSX编译器不知道什么时候调用React.createElement。

来源

2017-05-03 17:14:32

将jsx放入类组件方法时出现React-jsx语法错误

回答

相关问题