Question

我正在学习React.js并且不能让我的firt组件进行渲染。我的项目看起来像这样：

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的声明移到文件的开头，它应该在使用之前声明

使用browserify导入的React.js无效

1 个答案: