Uncaught SyntaxError: Неожиданный маркер и в React при визуализации клиента

Question

я получаю следующую ошибку

Uncaught SyntaxError: Unexpected token & 

при визуализации клиента после того, как правильно оказаны сервер

Это мой код

app.tsx

import * as React from "react"; 

import Excel from "./components/Excel"; 

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

React.render(
    <Excel header={initialState['header']} initialData={initialState['initialData']}/>, 
    document.getElementById('app') 
); 

---

компонент Excel

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

Я использую browserify на месте реагировать код в браузере. Вот полный пример https://github.com/mazzy89/expressjs-typescript филиал reactjs

Answer 1

Я бы предположил, что это не имеет ничего общего с React и ошибка здесь:

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

Если вы пытаетесь разобрать значение innerHTML в формате JSON, то это, вероятно, не работает, потому что у него есть объекты HTML, например ". В зависимости от типа элемента может работать вместо innerText:

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