组件如果作为一个表达式，就会调用，就会被渲染成虚拟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')); ```