React не может прочитать файл xml в папке publi c, когда файл tsx не находится в папке компонентов

Question

Привет, я пытался отобразить файл из данных. xml из папки publi c с помощью jqxgrid, но если файла tsx нет в папке компонентов, tsx не может найти данные. xml, кто-нибудь знает как это исправить? спасибо

import React from 'react';

import 'jqwidgets-scripts / jqwidgets / styles / jqx.base. css'; import 'jqwidgets-scripts / jqwidgets / styles / jqx.darkblue. css'; импортировать JqxGrid, {IGridProps, jqx} из 'jqwidgets-scripts / jqwidgets-response-tsx / jqxgrid';

класс Home расширяет React.PureComponent <{}, IGridProps> {

constructor(props: {}) {
    super(props);

    const source: any = {
        datafields: [
            { name: 'ID', type: 'int' },
            { name: 'Title', type: 'string' },
            { name: 'Status', type: 'bool' },
            { name: 'CronExpression', type: 'String' },
            { name: 'CreateUser', type: 'String' },
            { name: 'CreateTimer', type: 'String' },
        ],
        datatype: 'xml',
        id: 'ProductID',
        record: 'Product',
        root: 'Products',
        url: 'data.xml'
    };

    const cellsrenderer = (row: number, columnfield: string, value: string | number, defaulthtml: string, columnproperties: any, rowdata: any): string => {
        if (value < 20) {
            return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
        }
        else {
            return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
        }
    };

    this.state = {
        columngroups: [
            { text: 'Product Details', align: 'center', name: 'ProductDetails' }
        ],
        columns: [
            { text: 'ID', datafield: 'ID', width: 50 ,align: 'center'},
            { text: 'Title', datafield: 'Title', width: 100 },
            { text: 'Status', columntype: 'checkbox',datafield: 'Status' ,cellsalign: 'center', align: 'center' },
            { text: 'CronExpression', datafield: 'CronExpression', align: 'center', cellsalign: 'center' },
            { text: 'CreateUser', datafield: 'CreateUser', width: 150,align: 'center',cellsalign: 'center' },
            { text: 'CreateTimer', datafield: 'CreateTimer', width: 150,align: 'center',cellsalign: 'center'},
        ],
        source: new jqx.dataAdapter(source)
    }
}

public render() {
    return (
        <div>
        <JqxGrid theme={'darkblue'}

            width={'50%'} source={this.state.source} columns={this.state.columns}
            pageable={true} autoheight={true} sortable={true} altrows={true}
            enabletooltips={true} editable={false} selectionmode={'multiplecellsadvanced'}
            columngroups={this.state.columngroups} />
            </div>
    );
}

}

экспорт по умолчанию Home;