以下是我的代码. app.js是根文件,about.js是只显示一些文本的文件,index.js通过使用react-router处理所有的路由.我想在app.js中渲染我的about.js.如果我不在app.js中写“this.props.children”,它不会呈现.
App.js – 呈现其中的所有子组件的根文件.
"use strict"; import React from 'react'; import { Link } from 'react-router'; class App extends React.Component { render() { console.log(this.props.children) return( <div> <h1>Hello !</h1> <Link to="about">About</Link> {this.props.children} **//Is this necessary?** </div> ) } } export default App;
About.js
"use strict"; import React from 'react'; class About extends React.Component { render() { return( <div> <h1>About page!</h1> </div> ) } } export default About;
Index.js – 文件处理路由
import React from 'react'; import { render } from 'react-dom'; import { Router,Route,Link,browserHistory } from 'react-router' /*Require own custom files*/ import App from './app'; import About from './about'; render(( <Router history={browserHistory}> <Route path="/" component={App}> <Route path="about" component={About}/> </Route> </Router> ),document.getElementById('app'))
我正在与Ecma6的React 0.14工作.
为了使用反应路由器,是否有必要在根组件中写入“this.props.children”?如果是这样,为什么?
有没有其他方法来实现反应路由器?
是的,需要有this.props.children.
在您的index.js中,您将路由定义为嵌套.如果你声明你的/里面的路由,那么你必须渲染关于页面作为应用程序的孩子.如果您不想在App中调用this.props.children,然后使它们分开相同级别的路由,但是您失去了将其作为App的一部分使用的能力.
React路由器根据您的路由定义,基本上将About组件作为子进程传递给App.如果你不使用this.props.children你不能这样做.
如果您的应用程序中有其他页面,例如页面或索引页面.他们也不会在不使用this.props.children的情况下呈现.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。