Javascript 未捕获的SyntaxError：呈现客户端时出现意外的标记&in-React

我得到以下错误

Uncaught SyntaxError: Unexpected token &

在正确渲染服务器后渲染客户端时

这是我的密码

app.tsx

Excel组件

快线

我使用browserify在浏览器中放置react代码。下面是完整的示例

---

分支reactjs

我猜这与React无关，错误如下：

var initialState = JSON.parse(document.getElementById('initial-state').innerHTML);

如果您试图将innerHTML的值解析为JSON，那么它可能会失败，因为它有HTML实体，例如。根据元素的类型，使用innerText可能会起作用：

---

固定的这个问题与jade模板有关。initialState必须为Unescape状态。幸运的是，我还有另一个问题，但这次与React有关。当我点击标题时，它说this.state.data未在_sort函数中定义，您应该将其作为另一个问题发布。

import * as React from "react";

import { IExcelProps } from "../interfaces/ExcelProps";
import { IExcelState } from "../interfaces/ExcelState";

class Excel extends React.Component<IExcelProps, IExcelState> {

  name = "Excel";

  static propTypes: React.ValidationMap<any> = {
    header: React.PropTypes.arrayOf(
      React.PropTypes.string
    ).isRequired,
    initialData: React.PropTypes.arrayOf(
      React.PropTypes.arrayOf(React.PropTypes.string)
    ).isRequired
  }

  // this correspond to getInitialState
  initialState : IExcelState = {
    data: this.props.initialData
  };

  constructor(excelProps: IExcelProps) {
    super(excelProps);
  }

  componentWillMount() {
    this.setState(new ExcelState(this.initialState.data));
  }

  render() {
    return (
      <div className="panel panel-default">
        <div className="panel-heading">Airports Codes</div>
        <table className="table">
          <thead onClick={this._sort}>
            <tr>
              {this._renderHeader(this.props.header)}
            </tr>
          </thead>
          <tbody>
            {this._renderTableBody(this.state.data)}
          </tbody>
        </table>
      </div>
    );
  }

  private _renderHeader(header: string[]) : React.ReactElement<any>[] {
    return header.map(function(value, idx) {
      return <th key={idx}>{value}</th>
    });
  }

  private _renderTableBody(body: string[][]) : React.ReactElement<any>[] {
    return (
      body.map((row, idx) => {
        return (
          <tr key={idx}>
          {
            row.map((value, idx) => {
              return <td key={idx}>{idx === 1 ? this._beautifyTypeColumn(value) : value}</td>
            })
          }
          </tr>
        );
      })
    );
  }

  private _sort(e) {
    e.preventDefault();
    // this get the cellIndex corresponding with the header column
    let column = e.target.cellIndex;
    // returns a shallow copy of a portion of an array into a new array object.
    let dataTemp = this.state.data.slice();
    this.setState(new ExcelState(dataTemp.sort((a: any, b: any) => {
      return b[column] - a[column];
    })));
  }

  private _beautifyTypeColumn(value: string) : string {
    return this._capitalizeEachWord(value.replace('_', ' '));
  }

  private _capitalizeEachWord(value: string) : string {
    return value.replace(/\w\S*/g, (txt) => {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }
}

// XXX: move somewhere else
class ExcelState implements IExcelState {

  data : string[][];

  constructor(data: string[][]) {
    this.data = data;
  }
}

export default Excel;

export function index(req: express.Request, res: express.Response, next: Function) {
    fs.readFileAsync(
        path.join(__dirname, '..', 'mockData/airport-codes.csv'),
        'utf-8'
    ).then((content) => {
        return csv.parseAsync(content);
    }).then((parsedContent: Array<string[]>[]) => {

        let element = {
            header: [
                "ID", "Type", "Name", "Latitude (deg)", "Longitude (deg)", "Elevation", "Continent", "Country ISO", "Region ISO", "Municipality", "GPS Code", "IATA Code", "Local Code"
            ],
            initialData: parsedContent
        };

        ResponseHelper.renderTemplate('index', res, {
            output: React.renderToString(React.createElement(Excel, element)),
            initialState: JSON.stringify(element)
        });
    }).catch(next);
}

var initialState = JSON.parse(document.getElementById('initial-state').innerHTML);

var initialState = JSON.parse(document.getElementById('initial-state').innerText);