Question

我有一个非常简单的React应用程序，使用Webpack处理以下内容：

export const Row = (props) => {
  return <h1>This is a name</h1>;
};

export default class App extends React.Component {
  render() {
    return (
      <Row />
    )
  }
}

我已将Row移至其自己的文件中，并在我的主文件中将其添加到顶部：

import Row from './row';

但是我收到了这个错误：

warning.js?0260:36 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 `App`.

Answer 1

您似乎必须将React导入子文件并导出新模块：

import React from 'react';

export const Row = (props) => {
  return <h1>This is a name</h1>;
};

module.exports = Row;

Answer 2

您要将其导出为named export，因此您需要像这样导入它：

import {Row} from './row';

如果您希望import为default，那么首先您需要export默认function，如下所示：

const Row = (props) => {
  return <h1>This is a name</h1>;
};

export default Row;

然后你可以按照你的方式import：

import Row from './row';

有关 named and default import/export 的更多信息，请查看此文章。

组件移动到新文件时，React / Webpack app无效元素？

2 个答案: