使用 Chrome 处理 Ecmascript6 类问题答案

【问题标题】：React with Ecmascript6 classes problems using Chrome使用 Chrome 处理 Ecmascript6 类问题
【发布时间】：2017-01-20 17:23:15
【问题描述】：

我推荐使用 React ES6 来编写 React 类。我从一个简单的例子开始：

import React from 'react';
import ReactDOM from 'react-dom';

require('../node_modules/font-awesome/css/font-awesome.css');
require('../node_modules/bootstrap/dist/css/bootstrap.css');

require('jquery');
require('bootstrap');

import Dashboard from './components/Dashboard/Dashboard';

ReactDOM.render(
  <Dashboard/>,
  document.getElementById('react-container')
);

还有我在 ES6 中的组件：

import React from 'react';


class Dashboard extends React.Component {
  render() {
    return <h1>Hello, Don Trump</h1>
  }
}

我在 Chrome 55 上收到以下错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
    at invariant (VM1093 bundle.js:9069)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (VM1093 bundle.js:23166)
    at ReactCompositeComponentWrapper.performInitialMount (VM1093 bundle.js:23589)
    at ReactCompositeComponentWrapper.mountComponent (VM1093 bundle.js:23480)
    at Object.mountComponent (VM1093 bundle.js:16018)
    at mountComponentIntoNode (VM1093 bundle.js:28717)
    at ReactReconcileTransaction.perform (VM1093 bundle.js:17017)
    at batchedMountComponentIntoNode (VM1093 bundle.js:28739)
    at ReactDefaultBatchingStrategyTransaction.perform (VM1093 bundle.js:17017)
    at Object.batchedUpdates (VM1093 bundle.js:26233)

我认为我缺少一些简单的东西。帮助赞赏。

【问题讨论】：

您需要为仪表板组件添加“导出默认值”

标签： javascript reactjs ecmascript-6

【解决方案1】：

错误信息可能是正确的：

您可能忘记从定义组件的文件中导出组件。

导出您的Dashboard 组件，如下所示：

import React from 'react';

class Dashboard extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

export default Dashboard;

【讨论】：

【解决方案2】：

添加

导出默认仪表板

在组件的末尾；所以新代码将是

class Dashboard extends React.Component {
  render() {
    return <h1>Hello, Don Trump</h1>
  }
}
export default Dashboard;

【讨论】：

【解决方案3】：

您需要导出该类。实际可以同时导出和申报

import React from 'react';

export default class Dashboard extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

【讨论】：