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

【问题标题】：React-jsx syntax error when putting jsx into a class components method将jsx放入类组件方法时出现React-jsx语法错误
【发布时间】：2017-10-01 15:28:11
【问题描述】：

在一个 React 类组件中，我正在编写一个构建 <select> 下拉列表的方法，而 Babel 给出了一个错误。该错误是由第一个<select> 标签未关闭引起的。我无法找出正确的 react-jsx 语法。

在下面的代码中，我试图将创建<select> 的代码封装到组件类中的另一个方法中。如果我有该函数，只需构建选项并将<select> 和</select> 放在该函数周围（在渲染方法中）它可以工作，但我想将所选值放入<select> 标签而不是使用if 语句，再加上将它们放在一起。

正确的语法是什么？

谢谢...

cmets指向问题行的代码：

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

【问题讨论】：

标签： reactjs react-jsx

【解决方案1】：

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

<select></select>

变成

React.createElement('select');

也许这有助于理解为什么你不能真正分开打开和关闭“标签”。您可以认为它们等同于我猜的括号。

你可以这样做

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

（转换为return React.createElement('select', null, opts);）。

【讨论】：

两个很好的答案，我希望我能同时接受。谢谢菲利克斯和佩德罗。我自己应该看到的。我知道 Babel 做了那个翻译，但它的影响逃过了我。我将阅读更多关于 React.createElement();

【解决方案2】：

尝试使用map 而不是使用for 循环一次完成所有操作，如下所示：

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。

【讨论】：