組件移動到新文件時，React/Webpack應用無效的元素？

Question

我有一個非常簡單的作出反應的應用程序使用的WebPack工作下列要求：

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

export default class App extends React.Component { 
    render() { 
    return (
     <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

您導出爲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的更多信息。

Answer 2

看樣子你必須導入反應生成的子文件並出口新的模塊：

import React from 'react'; 

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

module.exports = Row;