錯誤在React.js

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無效 - 期望一個字符串（對於內置組件）或類/函數（對於複合組件），但得到：undefined。您可能忘記將組件從其定義的文件中導出。檢查渲染方法App。 bundle.js：357：9和 錯誤：可能只有一個子元素 我剛開始與反應所以它可能是一個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')) 

Answer 1

寫這樣的：

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

原因：一個陣營組件不能返回多個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') 
)