[英]Pass this.props.children to another file in react-router
I try to render a React Component in my page using react-router. 我尝试使用react-router在页面中渲染一个React组件。
The file structure I use is the one bellow: 我使用的文件结构如下所示:
React/
components/
Container/
Sidebar.js
Main.js
Container.js
Header.js
Layout.js
pages/
Main.js
Lesson.js
index.js
So I want to render the components from the pages
folder in the component that belongs to Main.js
. 因此,我想
Main.js
的组件中的pages
文件夹中呈现组件。 The Sidebar.js
holds the navigation menu. Sidebar.js
保存导航菜单。
Here is what I tried: 这是我尝试过的:
index.js index.js
import React from 'react';
import ReactDom from 'react-dom';
import Layout from './components/Layout';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import Index from './pages/Index';
import Lesson from './pages/Lesson';
const app = document.getElementById('app');
ReactDom.render(
<Router history={hashHistory} >
<Route path="/" component={Layout} >
<IndexRoute component={Index} ></IndexRoute>
<Route path="lesson" name="lesson" component={Lesson} ></Route>
</Route>
</Router>
,app);
Layout.js Layout.js
import React from 'react';
import Header from './Header';
import Container from './Container';
export default class Layout extends React.Component {
render() {
return (
<div>
<Header />
<Container />
</div>
);
}
}
Container.js Container.js
import React from 'react';
import Sidebar from './Container/Sidebar';
import Main from './Container/Main';
export default class Header extends React.Component {
render() {
return (
<div id="container">
<Sidebar />
<Main />
</div>
);
}
}
Main.js Main.js
import React from 'react'; 从'react'导入React;
export default class Main extends React.Component { render() { return ( {/* Here I want to render the contents */} ); 导出默认类Main扩展React.Component {render(){return({/ *这里我要渲染内容* /}); } }
}}
Sidebar.js Sidebar.js
import React from 'react';
import { Link } from 'react-router';
import sidebarStore from './Sidebar/SidebarStore.js';
export default class Sidebar extends React.Component {
render() {
return (
<div id="nav-md-placeholder">
<nav id="sidebar">
<ul id="main-menu">
<li class="ripple-btn">
<Link to="/">
<span class="item-align-fix">
<i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
<strong>
<span>index</span>
</strong>
</span>
</Link>
</li>
<li class="ripple-btn">
<Link to="lesson">
<span class="item-align-fix">
<i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
<strong>
<span>lesson</span>
</strong>
</span>
</Link>
</li>
</ul>
</nav>
</div>
);
}
}
I don't get any errors on my console when building the app nor in th browser console. 在构建应用程序或浏览器控制台时,我的控制台上没有任何错误。 When I click on the links I redirect to the following urls but nothing happen:
当我单击链接时,我重定向到以下URL,但没有任何反应:
Click on Index -> http://localhost/new-webclass/#/?_k=gukonu
Click on Lesson -> http://localhost/new-webclass/#/lesson?_k=7mcbcx
I don't know if I setted the routes with the wrong way. 我不知道我是否以错误的方式设置了路线。 The official documentation doesn't help either.
官方文档也无济于事。
Here is also the example of the Lesson.js I want to render: 这也是我要渲染的Lesson.js的示例:
import React from 'react';
export default class Lesson extends React.Component {
render() {
return (
<h1>Lesson Page</h1>
);
}
}
See the answer of Random User bellow. 请参阅随机用户的回答。 He provides a nice explanation.
他提供了一个很好的解释。 So down bellow you see how I passed
{this.props.children}
to the file with the component I needed: 因此,下面您将看到如何将
{this.props.children}
传递给具有所需组件的文件:
Layout.js Layout.js
<Container main_content={this.props.children}/>
Container.js Container.js
<Main main_content={this.props.main_content}/>
Main.js Main.js
render() {
return (
<main class={this.MainContentPlaceholder} id="main-content-placeholder">
<Overlay />
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
{this.props.main_content}
</div>
</main>
);
In your index.js
file 在您的
index.js
文件中
<Router history={hashHistory} >
<Route path="/" component={Layout} >
<IndexRoute component={Index} ></IndexRoute>
<Route path="lesson" name="lesson" component={Lesson} ></Route>
</Route>
</Router>
<Route path="/" component={Layout} >
acts as the parent route and all other routes are its sub-routes
. <Route path="/" component={Layout} >
充当父路由,所有其他路由是其sub-routes
。 and its using Layout
component 及其使用的
Layout
组件
So even when you change the route, the parent component
remains there and the component of new route is passed to the parent component Layout
as a children
, but you're not rendering children in your Layout
component. 因此,即使更改路线,
parent component
也会保留在那里,新路线的组件会作为children
传递到父级组件Layout
,但是您不会在Layout
组件中呈现子级。
So, in your Layout.js
file, add this line {this.props.children}
, Example 因此,在您的
Layout.js
文件中,添加以下行{this.props.children}
,示例
return (
<div>
<Header />
<Container />
{this.props.children}
</div>
);
You can Re-arrange it to suit your needs, but add {this.props.children}
wherever you want to render the child components passed to it. 您可以重新排列它以适合您的需要,但是可以在要渲染传递给它的子组件的任何位置添加
{this.props.children}
。
I think you're complicating things, Anyways you could do this 我认为您正在使事情变得复杂,无论如何您都可以做到这一点
In Layout.js
, You can pass the children to your container like 在
Layout.js
,您可以将子级传递给容器,例如
<Container>
{this.props.children}
</Container>
And in Container.js
pass the children using same technique 然后在
Container.js
使用相同的方法传递子级
<Main>
{this.props.children}
</Main>
And in Main.js
在
Main.js
render() {
return (
<main className={this.MainContentPlaceholder} id="main-content-placeholder">
<Overlay />
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
{this.props.children}
</div>
</main>
);
Remember to use className prop instead of using class , In React JSX
if you want to set class
on an element
you have to use className
prop instead of class
prop 记住要使用className prop而不是class ,在
React JSX
如果要在element
上设置class
,则必须使用className
prop而不是class
prop
Note: I think it would be best if you can place all the visual elements in your layout file, like Header
, Navigation
, Sidebar
, Footer
and then place this.props.children
in a wrapper div
, So the content within the wrapper will keep changing as you navigate between different routes., And you can update the header, navigation, aside, etc data , active states using your store . 注意:我认为最好将所有视觉元素放置在布局文件中,例如
Header
, Navigation
, Sidebar
, Footer
,然后将this.props.children
放在wrapper div
,这样wrapper div
的内容将保持不变在不同的路线之间导航时会发生变化。,并且您可以使用商店来更新标题,导航,预留等数据 , 活动状态 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.