Question

我是js的新手。
我尝试将es5更改为es6类。
在我的es5小提琴中，标签内容工作正常
在我的es6小提琴中，标签内容有效
但是现在我打算将这些组件划分为三个不同的组件
我已导入一个文件。
但我收到以下三个错误
你能告诉我如何解决它吗
在下面提供我的代码。
在小提琴中不知道如何将我的文件分开。

标签内容显示为es6

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `first-time-tab`.

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `first-time-tab`.

invariant.js:39 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `first-time-tab`.(…)



import React from 'react';
import Tabs from './sports-content';
import Pane from './players-content';

Answer 1

很难按照您的要求进行操作，但这些警告意味着您尝试从不导出组件的文件导入React组件，或将其导出为命名组件而不是默认组件：

在ES6中导出的两种常用方法以及如何导入它们：

export default class Tabs extends Component { // logic }

要导入：

import Tabs from 'path/to/file'

第二种方法是使用命名导出，可能是您所做的导致错误：

export class Tabs extends Component { // logic }

要导入：

import { Tabs } from 'path/to/file'

请注意，在默认情况下，导入时不需要curlies，您可以为其指定任何名称。缺点是您只能在文件中有一个默认导出。所有其他的都被省略了。

在第二种情况下，你必须用curlies导入它，它必须与你文件中声明的名称相同。好处是你可以在一个文件中有多个命名导出。

我打算将这些组件分开并分成三个不同的组件

1 个答案: