我正在尝试使用Reactjs做侧边栏,但我没有得到它。
我想知道如何正确地将道具从App.js传递给Middle.js。
我有结构index.js> routes.js> App.js> Header.js,Middle.js> Sidebar.js,(DashboardPage.js,AccountPage.js - 以dinamically方式呈现的页面)
Header.js - >在图像上有一个IndexLink Sidebar.js - >有一个IndexLink和一个链接来呈现AccountPage.js
为App.js设置了路由,但该组件应该在Middle.js组件中加载。
以下是我的代码:
index.js
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
render(
<Router history={browserHistory} routes={routes} />, document.getElementById('app')
);
routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import DashboardPage from './components/middle/dashboard/DashboardPage';
import AccountPage from './components/middle/accounts/AccountPage';
export default (
<Route path="/" component={App}>
<IndexRoute component={DashboardPage} />
<Route path="accounts" component={AccountPage} />
</Route>
);
App.js
import 'babel-polyfill';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import Header from './common/Header';
import Middle from './middle/Middle'
import '../../css/style.css';
class App extends React.Component{
var { app } = this.props;
render() {
return (
<div>
<Header />
<Middle />
</div>
);
}
}
export default App;
Header.js // img
的IndexLink'use strict';
import React from 'react';
import User from './User';
import {IndexLink, Link} from 'react-router';
import '../../../css/header.css';
class Header extends React.Component{
render() {
return (
<div className="contactto-header">
<div className="contactto-header-content">
<IndexLink to="/"><img className="contactto-header-content-logo" src="static/img/logo.png" alt="contactto logo" /></IndexLink>
<div className="contactto-header-content-alarm"></div>
<div className="contactto-header-content-user">
<User />
</div>
</div>
</div>
);
}
}
export default Header;
Middle.js
'use strict';
import React, {PropTypes} from 'react';
import '../../../css/middle.css';
import SideBar from './SideBar'
class Middle extends React.Component{
render() {
return (
<div className="contactto-middle">
<div className="contactto-middle-content">
<SideBar />
{app.children} // should render here
</div>
</div>
);
}
}
export default Middle;
Sidebar.js
'use strict';
import React from 'react';
import {IndexLink, Link} from 'react-router';
import '../../../css/sidebar.css';
class SideBar extends React.Component{
render() {
return (
<div className="sidebar-container">
<ul className="sidebar-container-ul">
<li className="sidebar-container-ul-li">
<IndexLink className="sidebar-container-ul-li-a" to="/">Dashboard</IndexLink>
</li>
<li className="sidebar-container-ul-li">
<Link className="sidebar-container-ul-li-a" to="accounts">Contas</Link>
</li>
</ul>
</div>
);
}
}
export default SideBar;
有什么问题?
我是React的新手,如果其他代码没有正确完成请告诉我:)
提前致谢。
答案 0 :(得分:2)
首先,您的路线组件将通过this.props.children在App下提供。如果你想用它们包装它们可以尝试这样:
class App extends React.Component{
render() {
return (
<div>
<Header />
<Middle>
{this.props.children}
</Middle>
</div>
);
}
}
然后在Middle.js
class Middle extends React.Component{
render() {
return (
<div className="contactto-middle">
<div className="contactto-middle-content">
<SideBar />
{this.props.children}
</div>
</div>
);
}
}
答案 1 :(得分:1)
有点不清楚你在问什么,但似乎你想知道如何将道具从App.js传递给Middle.js。方法如下:
class App extends React.Component{
var { app } = this.props;
render() {
return (
<div>
<Header />
<Middle someProp={someValue} />
</div>
);
}
}
现在在Middle.js中,您可以访问this.props.someProp
中的someProp。
答案 2 :(得分:-3)
也许你可以使用https://www.npmjs.com/package/react-side-bar。 Example中有一个完整的例子,看起来很好。
npm install --save react-side-bar