組件如果作為一個表達式，就會調用，就會被渲染成虛擬dom 比如作為一個return的返回值，比如作為一個參數傳入 解決辦法是給這些個組件包一層`()=>` ``` import React from 'react'; import {Route} from '../react-router-dom'; //注意要用()=> 包一層，不然得到的是虛擬DOM（因為<Route></Route>放這里就相當于函數調用），而不是組件 //let el = <Xxx></Xxx> 這樣得到的就是虛擬dom export default (Component) => ( ()=><Route component={Component}></Route> ) ``` 其實組件就是一個函數，`<>`就相當于`fn()` ``` import React from 'react'; class Panel extends React.Component{ render(){ return ( <div className="panel panel-default"> <div className="panel-heading">頭部</div> <div className="panel-body"> { // this.props.children this.props.children('面板') } </div> </div> ); } } export default (<Panel> {/*{<div>我是內容</div>}*/} {(text)=><div>{`我是${text}`}</div>} </Panel>, document.querySelector('#root')); ```