javascript - React.js 与 browserify 导入不起作用

Question

我正在学习 React.js，但无法使我的第一个组件渲染。我的项目如下所示:

javascript
  |
  --components
  |   |
  |   ---- searchbar.jsx
  |
  |    
  --app.jsx

searchbar.jsx:

export default class SearchBar extends React.Component {
    //some code

    render(){
       //some code
     }
}

app.jsx 看起来像这样。

import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from './components/searchbar.jsx';

ReactDOM.render(

        <App />
       ,
    document.getElementById('content')
);

class App extends React.Component {



    render() {
        <div>
            <SearchBar  placeHolder='search bar text'/>
        </div>
    }
}

编译和打包时没有错误。但是，当我运行它时，出现以下错误:

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.
  printWarning  
  warning   
  createElement 
  1../components/searchbar.jsx  

当我将所有代码放入 app.jsx 中并且不使用导入时，一切都会正常工作并且搜索栏会显示..但我想将组件放在不同的文件中。那我该怎么做呢？

Answer 1

SearchBar 模块导出默认值，而不是命名导出(通过用大括号括起来，您需要命名导出)

您应该将 import { SearchBar } 更改为 import SearchBar

另外，App的声明应移至文件开头，应在使用前声明