JSX无法解析部分HTML标记

Question

我使用的是react-rails，我需要能够在我的JSX中仅传递一个开始HTML标记（即：<form>），并将一个结束标记传递给一个数组（即：</form>）文件。当我尝试做一方或我得到ExecJS :: RuntimeError，说语法错误：未知：意外令牌。

这不起作用：

array.push(<form>)

这工作：

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

Answer 1

JSX是使用库做出反应以JavaScript创建标记语法糖。

<form></form> 

在JSX

编译为：

React.createElement("form", null); 

（Try it!）

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