javascript - react 错误 #130 |元素必须是字符串而不是对象

Question

我是这个平台的新手，我遇到了 reactjs 输出的问题。

如果尝试使用 react-table 创建表，但如果出现以下错误:这个错误表明， react 需要一个字符串，但我给了他们一个对象。但是我不明白是哪个对象。

您知道为什么我会收到此错误以及如何修复此错误吗？

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at l (react-dom.production.min.js:12)
    at qc (react-dom.production.min.js:43)
    at K (react-dom.production.min.js:53)
    at n (react-dom.production.min.js:57)
    at react-dom.production.min.js:62
    at f (react-dom.production.min.js:130)
    at beginWork (react-dom.production.min.js:135)
    at d (react-dom.production.min.js:158)
    at f (react-dom.production.min.js:159)
    at g (react-dom.production.min.js:159)

代码:

class App extends React.Component {

    state = {
        text: this.props.test
    }

    render() {

        const data = this.state.text;
        console.log(data);

        const tmpData = [{
            "test": data.test,
            "test1": data.test1,
            "test2": data.test2
            }];

        const itemData = JSON.stringify(tmpData);
        console.log(itemData);

        return (
                  <div>
                    <br />
                    <strong>Note: Having the console open will slow performance</strong>
                    <br />
                    <br />
                    <ReactTable
                      data={itemData}
                      columns={[
                      {
                          Header: "Test",
                          accessor: "test"
                      },
                      {
                          Header: "Test1",
                          accessor: "test1"
                      }, 
                      {
                          Header: "Test2",
                          accessor: "test2",
                      }
                      ]}
                    />
                    <br />
                  </div>
                )
    }
}

谢谢!问候，多管齐下

Answer 1

这是一个模块导入问题。当 React 尝试挂载 ReactTable 组件时，组件的类型是一个对象，因为 ReactTable 变量包含的不是 ReactTable 组件，而是 ReactTable 模块。

正确的导入形式全局模块应该是:

const ReactTable = window.ReactTable.default;

你可以在这里试试: https://codepen.io/mazhuravlev/pen/QQdXbB .要重现该问题，请从 ReactTable 导入语句中删除 .default。

const ReactTable = window.ReactTable.default;

class App extends React.Component {

    render() {
        const tmpData = [{
            "test": 'test',
            "test1": 'test1',
            "test2": 'test2'
        }];
       const r = <ReactTable
                data={tmpData}
                columns={[
                    {
                        Header: "Test",
                        accessor: "test"
                    },
                    {
                        Header: "Test1",
                        accessor: "test1"
                    },
                    {
                        Header: "Test2",
                        accessor: "test2",
                    }
                ]}
            />;
        debugger;
        return r;
    }
}

ReactDOM.render(<App />, document.getElementById('app'));