Javascript React-won';不要让我用React.Fragment
我在尝试托管我的web应用时遇到此错误。问题似乎在于React.Fragment调用Javascript React-won';不要让我用React.Fragment,javascript,reactjs,Javascript,Reactjs,我在尝试托管我的web应用时遇到此错误。问题似乎在于React.Fragment调用 × 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 fi
×
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 your code at search-input.js:8.
SearchInput
src/components/search-input.js:8
5 |
6 | //This is the Presentation component
7 | const SearchInput = ({searchInput}) =>
> 8 | <React.Fragment>
9 | <div>{searchInput}</div>
10 | </React.Fragment>
11 |
View compiled
Search
src/containers/search.js:47
44 | <input onChange={(input) => this.searchInput(input)}></input>
45 | </div>
46 | <div className='row'>
> 47 | <SearchInput searchInput = {this.state.searchInput}/>
48 | <button onClick={this.buttonClick} className='btn btn-danger btn-xs'>SEARCH</button>
49 | </div>
50 | </div>
View compiled
Search
src/containers/search.js:41
38 |
39 | render(){
40 | return(
> 41 | <div className='search'>
42 | <div className='row'>
43 | <h1>Sentiment</h1>
44 | <input onChange={(input) => this.searchInput(input)}></input>
View compiled
Welcome
src/welcome.js:12
9 | const Welcome = ({}) =>
10 | <div className='row'>
11 | <div className='col-xs-5'>
> 12 | <Search/>
13 | <Link to="/search">
14 | <button className='btn btn-xs'>Go to Map</button>
15 | </Link>
View compiled
App
src/App.js:23
20 | <h1 className="App-title">{this.state.title}</h1>
21 |
22 | {/* We rended diffrent component based on the path */}
> 23 | <Route exact path="/" component={Welcome}/>
24 | <Route path="/search" component={Discover}/>
25 |
26 |
View compiled
App
src/App.js:19
16 | render() {
17 | return (
18 | <div className="App">
> 19 | <header className="App-header">
20 | <h1 className="App-title">{this.state.title}</h1>
21 |
22 | {/* We rended diffrent component based on the path */}
View compiled
(anonymous function)
src/index.js:10
7 |
8 | ReactDOM.render((
9 | <BrowserRouter>
> 10 | <App />
11 | </BrowserRouter>
12 | ), document.getElementById('root'));
13 |
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
×
React.createElement:类型无效--应为字符串(对于内置组件)或类/函数(对于复合组件),但Get:未定义。您可能忘记了从定义组件的文件中导出组件。
在search input.js:8中检查您的代码。
搜索输入
src/components/search-input.js:8
5 |
6 |//这是演示组件
7 | const SearchInput=({SearchInput})=>
> 8 |
9 |{searchInput}
10 |
11 |
视图编译
搜寻
src/containers/search.js:47
44 | this.searchInput(输入)}>
45 |
46 |
> 47 |
48 |搜索
49 |
50 |
视图编译
搜寻
src/containers/search.js:41
38 |
39 | render(){
40 |返回(
> 41 |
42 |
43 |情绪
44 | this.searchInput(输入)}>
视图编译
欢迎
src/welcome.js:12
9 | const Welcome=({})=>
10 |
11 |
> 12 |
13 |
14 |转到地图
15 |
视图编译
应用程序
src/App.js:23
20 |{本州名称}
21 |
22{/*我们基于路径*/}渲染了不同的组件
> 23 |
24 |
25 |
26 |
视图编译
应用程序
src/App.js:19
16 | render(){
17 |返回(
18 |
> 19 |
20 |{本州名称}
21 |
22{/*我们基于路径*/}渲染了不同的组件
视图编译
(匿名函数)
src/index.js:10
7 |
8 | ReactDOM.render((
9 |
> 10 |
11 |
12 |),document.getElementById('root');
13 |
视图编译
此屏幕仅在开发过程中可见。如果应用程序在生产过程中崩溃,则不会显示此屏幕。
打开浏览器的开发人员控制台以进一步检查此错误。
我不知道是什么原因导致了这个错误。我假设
React.Fragment
导出正确,所以我猜我的React安装有问题。如何解决这个问题?确保你使用的是React@^v16.2.0你检查了吗?Fragment是一个新功能,你的预编译器可能还不支持它们。这可以导入React的方式可能有问题。请包含实际代码,而不仅仅是错误消息。