javascript - JSX 无法解析部分 HTML 标签

Question

我正在使用react-rails，我需要能够将一个开始 HTML 标记（即：）和一个结束标记传递到我的 JSX 文件中<form>的数组（即：）中。</form>当我尝试做任何一个或者我得到一个ExecJS::RuntimeError说SyntaxError: unknown: Unexpected token。

这不起作用：

array.push(<form>)

这有效：

array.push(<form></form>)

Answer 1

JSX 是使用 React 库在 JavaScript 中创建标签的语法糖。

<form></form>

在 JSX 中编译为：

React.createElement("form", null);

（试试看！）

JSX不是“作为字符串的 HTML”或您可能认为它有效的任何其他方式。它根本不像你想要的那样工作。

如果没有更多关于您想要通过此实现的目标的详细信息，我们将无法为您提供进一步的帮助。

Answer 2

我刚才遇到了同样的问题。我希望能够添加单独的标签，这样我就可以在中间动态插入 JSX 标签或道具。但是，我为此使用了解决方法。

您可能会使用函数来获得您想要在要拆分的标签之间插入项目的类似功能。例如，我想将项目放在 tbody 和 tr 标签之间。我在这里使用 ES6 语法和 Javascript 类：

import React, {Component} from 'react';
class Table extends Component {

  constructor(props)
    this.powerLevels = 
    [
      {level: "1", comment: "Weakling!"} , 
      {level: "9001", comment: "It's over 9000!"}
    ];
  } 


  //Adds columns in between the rows
  addColumns = (index) => {
    return (
      <td> {this.powerLevels[index].level} </td>
      <td> {this.powerLevels[index].comment} </td>
    }
  }
  //Adds a table row
  addRow = (index) => {
    return (
      <tr>
        {this.addColumns(index)};
      </tr>);
  }

  generateTable = () => {
    let tableLength = this.powerLevels.length;
    let jsxArray = [];

    for(let i = 0; i < tableLength; i++){
      jsxArray.push(this.addRow(i));
    }

    return  (<tbody> {jsxArray} </tbody> );
  }

  render () {

    //{} these brackets allow for Javascript to be written
    return (
      <div>

        {this.generateTable()}

      </div>
    );
  }
}