React.createElement：类型无效——需要一个字符串（用于内置组件）或一个类/函数，但得到：未定义 [重复]

Question

我有一个父组件 app.js

import React, { Component } from 'react'
import { Route, Link, BrowserRouter, HashRouter} from 'react-router-dom'
//import BrowserHistory from 'react-router/lib/BrowserHistory'
import {Scholarships} from './scholarships'

class App extends Component {
        render() {
                return (
                        <div>
                        <HashRouter>
                            <div>
                                <Route exact path='/' component={Home} />
                                <Route path='/hello' component={Hello} />
                                <Route path='/scholarship' component={Scholarships} />

                            </div>
                        <Scholarships /> 
                        </HashRouter>
                        </div>

                )

        }
}

const Home = () => <h1> Hello from home! </h1>
const Hello = () => <h2> Hello React </h2>

export default App

并且有一个子组件 scholarships.js

import React, {Component} from 'react'
import Request from 'react-http-request' //`https://www.npmjs.com/package/react-http-request`

class Scholarships extends Component {
        constructor(props) {
                super(props);
        }
        render() {
                return (
                        <Request
                                url = 'https://api.github.com/users/mbasso'
                                method = 'get'
                                accept = 'application/json'
                                verbose = {true}
                        >
                                {
                                        ({error, result, loading}) => {
                                                        if(loading) {
                                                                return <div id="scholarships"> loading... </div>;
                                                        }
                                                        else {
                                                                return <div id="scholarships"> { JSON.stringify(result) }</div> ;
                                                        }

                                                }
                                }
                        </Request>
                )
        }
}

export default Scholarships

它抛出一个错误 警告：React.createElement: type is invalid -- 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件。检查App 的渲染方法。 bundle.js:357:9 和 错误：A 可能只有一个子元素 我刚开始反应，所以这可能是一个菜鸟问题，但我在这里被打动了，如果我将<Scholarships /> 直接传递到 ma​​in.js 它按预期工作，为什么我不能嵌套在这里

另外我也试过了

• const scholarship = () => <Scholarships />
• const scholarship = <Scholarships />
• const scholarship = () => (<Scholarships />)
• const scholarship = () => {Scholarships}

我还想知道我的 Scholarship 组件返回纯 JSON.Stringify 文本，那么为什么它仍然是引用 const scholarship = () => <Scholarship /> 给出的错误的 Object

我的 ma​​in.js 文件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
import Scholarships from './scholarships'
ReactDOM.render(<App />, document.getElementById('root'))

Answer 1

这样写：

<HashRouter>
    <div>
        <Route exact path='/' component={Home} />
        <Route path='/hello' component={Hello} />
        <Route path='/scholarship' component={Scholarship} />
    </div>
    <Scholarships />
</HashRouter>

原因：一个React组件不能返回多个React元素，但是一个JSX表达式可以有多个子元素，所以如果你想让一个组件渲染多个东西你可以wrap他们在div。

不要忘记render() 函数就是一个函数。函数总是接受多个参数并且总是只返回一个值。

更新：

像这样渲染路线，它会起作用：

ReactDOM.render(
    <HashRouter>
        <div>
            <Route exact path='/' component={Home} />
            <Route path='/hello' component={Hello} />
            <Route path='/scholarship' component={Scholarships} />

        </div>
        <Scholarships /> 
    </HashRouter>,
    document.getElementbyId('root')
)