我有一个父组件 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无效 - 期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。您可能忘记从其定义的文件中导出组件。请检查App
的呈现方法。 bundle.js:357:9 和
错误:A可能只有一个子元素
我刚开始做出反应,所以这可能是一个noob问题,但我在这里感到震惊,如果我将<Scholarships />
直接传递到 main.js ,它正在按预期工作,为什么我不是能够在这里筑巢
另外我也试过
const scholarship = () => <Scholarships />
const scholarship = <Scholarships />
const scholarship = () => (<Scholarships />)
const scholarship = () => {Scholarships}
我还想知道我的奖学金组件返回普通的JSON.Stringify文本,为什么它仍然是参考const scholarship = () => <Scholarship />
我的 main.js 文件
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
import Scholarships from './scholarships'
ReactDOM.render(<App />, document.getElementById('root'))
答案 0 :(得分:-1)
像这样写:
<HashRouter>
<div>
<Route exact path='/' component={Home} />
<Route path='/hello' component={Hello} />
<Route path='/scholarship' component={Scholarship} />
</div>
<Scholarships />
</HashRouter>
原因:React组件无法返回多个React
元素,但单个JSX
表达式可以包含多个子元素,因此如果您想要一个组件渲染多个你可以用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')
)