Question

出现错误是：

bundle.js:1517 Warning: React.createElement: type is invalid -- expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in.
Check the render method of `PluginHost$$1`.
    in PluginHost$$1 (created by Grid)
    in Grid (created by Grid$$1)
    in Grid$$1 (created by ProductsAndComponentsForLibrary)
    in div (created by ProductsAndComponentsForLibrary)
    in div (created by ProductsAndComponentsForLibrary)
    in div (created by ProductsAndComponentsForLibrary).

这是相关代码：

＆＃13;

import React from 'react';
import {
    PagingState,
    LocalPaging,
} from '@devexpress/dx-react-grid';
import {
    Grid,
    Table,
    TableHeaderRow,
    TableColumnResizing,
    PagingPanel,
} from '@devexpress/dx-react-grid-bootstrap3';
import Chip from 'material-ui/Chip';
import ProductsComponentsOfLibrary
    from '../../../services/dependencyManager/database/LoadProductsAndComponentsUsingLibrary';
import LoadingScreen from '../Common/LoadingScreen';

const columns = [
    { name: 'Number', title: '' },
    { name: 'ProductName', title: 'The Product Name' },
    { name: 'ProductVersion', title: 'The Product Version' },
    { name: 'ProductLevelDependency', title: 'Product Level Dependency' },
    { name: 'ComponentName', title: 'Component Name' },
    { name: 'ComponentVersion', title: 'Component Version' },
    { name: 'ComponentType', title: 'Component Type' },
];

export default class ProductsAndComponentsForLibrary extends React.PureComponent {
    /**
     * @class ProductsForLibrary
     * @extends {Component}
     * @param {any} props props for constructor
     * @description Sample React component
     */
    constructor(props) {
        super(props);
        this.state = {
            tRows: [],
            showTable: false,
            columnWidths: {
                Number: 100,
                ProductName: 350,
                ProductVersion: 160,
                ProductLevelDependency: 200,
                ComponentName: 400,
                ComponentVersion: 200,
                ComponentType: 200,
            },
            expandedRows: [],
            libraryName: '',
            libraryVersion: '',
            loading: '',
            numberOfRecords: 0,
        };
        this.loadTable = this.loadTable.bind(this);
    }
    componentWillReceiveProps(props) {
        if (props.renderCondition) {//eslint-disable-line
            this.setState({
                libraryName: props.nameLibrary,//eslint-disable-line
                libraryVersion: props.versionLibrary,//eslint-disable-line
                numberOfRecords: 0,
                showTable: false,
            });
            this.loadTable(props.nameLibrary, props.versionLibrary);
        }
    }
    /**
    * Load Products and Components using the given library
    */
    loadTable(lName, lVersion) {
        ProductsComponentsOfLibrary.getProductsAndComponentsUsingLibrary(lName, lVersion).then((response) => {
            let i = 0;
            const array = [];
            if (response.data.length > 0) {
                for (i; i < response.data.length; i++) {
                    array[i] = {
                        Number: ++i,
                        ProductName: response.data[--i].PRODUCT_NAME,
                        ProductVersion: response.data[i].PRODUCT_VERSION,
                        ProductLevelDependency: response.data[i].PRODUCT_LEVEL_DEPENDENCY,
                        ComponentName: response.data[i].COMPONENT_NAME,
                        ComponentVersion: response.data[i].COMP_VERSION,
                        ComponentType: response.data[i].COMP_TYPE,
                    };
                }
            } else {
                array[0] = 'No results';
            }
            this.setState({
                tRows: array,
                numberOfRecords: response.data.length,
                showTable: true,
            });
        });
    }
    render() {
        let returnView;
        if (this.props.renderCondition) {
            if (this.state.showTable) {
                returnView = (
                    <div>
                        {this.state.numberOfRecords > 0 ?
                            <div>
                                <div>
                                    <Chip>
                                        {this.state.numberOfRecords} results are returned
                                    </Chip>
                                </div>
                                <Grid
                                    rows={this.state.tRows}
                                    columns={columns}
                                >
                                    <PagingState
                                        defaultCurrentPage={0}
                                        pageSize={12}
                                    />
                                    <LocalPaging />
                                    <Table />
                                    <TableColumnResizing defaultColumnWidths={this.state.columnWidths} />
                                    <TableHeaderRow allowResizing />
                                    <PagingPanel />
                                </Grid>
                            </div>
                            :
                            <Chip>
                                No Libraries Found
                            </Chip>
                        }
                    </div>
                );
            } else {
                returnView = (
                    <LoadingScreen />
                );
            }
        }
        return (
            <div>
                {returnView}
            </div>
        );
    }
}

＆＃13;

Answer 1

检查安装的Grid和React的版本。 dx-react-grid-bootstrap3版本^1.0.0-beta.1与反应15兼容，而beta.2则需要反应16。我遇到了同样的问题并通过更改我的package.json来修复它：

 "@devexpress/dx-react-core": "^1.0.0-beta.1",
 "@devexpress/dx-react-grid": "^1.0.0-beta.1",
 "@devexpress/dx-react-grid-bootstrap3": "^1.0.0-beta.1",

到此：

 "@devexpress/dx-react-core": "1.0.0-beta.1",
 "@devexpress/dx-react-grid": "1.0.0-beta.1",
 "@devexpress/dx-react-grid-bootstrap3": "1.0.0-beta.1",

然后在npm install之后它运行正常（使用React v15）。

Answer 2

实际上，当我使用VirtualTableView而不是来自'@devexpress / dx-react-grid-bootstrap3'的表以及你的更改@ischenkodv

检查`PluginHost $$ 1的render方法

2 个答案: