JSX 无法解析部分 HTML 标记

Question

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

这不起作用：

array.push(<form>)

这个有效：

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

Answer 1

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

<form></form>

在 JSX 中编译为：

React.createElement("form", null);

(Try it!)

JSX 是不是 "HTML as a string" 或您可能认为它有效的任何其他方式。它根本无法按照您希望的方式工作。

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

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

JSX 无法解析部分 HTML 标记

JSX can't parse partial HTML tag

javascript

reactjs

react-jsx

react-rails