Question

我正在使用react-rails，我需要能够只将一个开始HTML标记（即：<form>）和一个结束标记传递给一个数组（即：</form> ）在我的JSX文件中。当我尝试做其中任何一个或者我得到一个 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);

（Try it!）

JSX 不＆＃34; HTML为字符串＆＃34;或者你认为它有效的其他方式。它根本不像你想要的那样工作。

如果没有更详细的信息，我们无法帮助您实现这一目标。

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标记

2 个答案: