2

私は使用しており、開始 HTML タグ (つまり: ) と終了タグだけを JSX ファイルの配列 (つまり: )react-railsに渡すことができる必要があります。いずれかを実行しようとすると、またはSyntaxError : unknown: Unexpected tokenというExecJS::RuntimeErrorが表示されます。<form></form>

これは機能しません:

array.push(<form>)

これは機能します：

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

4

2 に答える 2

3

JSX は、React ライブラリを使用して JavaScript でタグを作成するためのシンタックス シュガーです。

<form></form>

JSX でコンパイルすると、次のようになります。

React.createElement("form", null);

(やってみよう！ )

JSX は「文字列としての HTML」や、他の方法で動作するとは考えていません。それは単にあなたが望んでいるようには機能しません。

これで正確に何を達成したいのかについての詳細がなければ、これ以上お手伝いすることはできません.

于 2015-10-21T20:37:19.310 に答える
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>
    );
  }
}
于 2017-05-03T00:13:21.227 に答える