catch되지 않은 오류 : 요소 유형이 잘못되었습니다 예상 내가 구성하려고 문자열

Question

내가 내 Main.js

import React from 'react' 
import { Link } from 'react-router' 

const Main = (props) => { 
    return (
    <div> 
     <h1> 
     <Link to="/">Reduxstagram</Link> 
     </h1> 
     {React.createElement(props.children, props)} 
    </div> 
) 
} 

export default Main 

이 내 인덱스가 라우터를 반응하지만,이 이상한 오류

Uncaught Error: Element type is invalid: expected a string.. check render method of Main.

을 얻었다. JS

import Main from './components/Main' 
import Single from './components/Single' 
import PhotoGrid from './components/PhotoGrid' 

//routes 
import { Router, Route, IndexRoute, browserHistory } from 'react-router' 

const router = (
    <Router history={browserHistory}> 
    <Route path="/" component={Main}> 
     <IndexRoute component={PhotoGrid}></IndexRoute> 
     <Route path="/view/:postId" component={Single}></Route> 
    </Route> 
    </Router> 
) 

render(router, document.getElementById('root')); 

내가 반응 라우터에 의해 발생할 수 있습니다 생각, 나도 몰라. 내가 간단하게한다면

render(<Main>hi</Main>, document.getElementById('root')); 

나는 그것을 볼 수있다. 이상한.

Answer 1

에 {props.children}을 쓸 수 있습니다. React.createElement은 필요 없습니다.

const Main = (props) => { 
    return (
    <div> 
     <h1> 
     <Link to="/">Reduxstagram</Link> 
     </h1> 
     {props.children} 
    </div> 
) 
} 

편집 :
귀하의 의견에 대한 후속, 당신은 경로를 통해 소품을 전달하려면 :

const router = (
    <Router history={browserHistory}> 
    <Route path="/" component={Main} myProp={"this is a prop!"}> 
     <IndexRoute component={PhotoGrid}></IndexRoute> 
     <Route path="/view/:postId" component={Single}></Route> 
    </Route> 
    </Router> 
) 

그리고 다음 route에서 당겨 :

const Main = (props) => { 
    return (
    <div> 
     <h1> 
     <Link to="/">Reduxstagram</Link> 
     </h1> 
     {props.route.myProp} 
    </div> 
) 
}