所以我一直在努力解决这个问题。我有一个接受一个孩子作为道具的组件,它应该是我托管的所有页面的基础。
Base.jsx:
import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';
const Base = ({ child }) => (
<div>
<div className="top-bar">
<div className="top-bar-left">
<NavLink to="/">React App</NavLink>
</div>
<div className="top-bar-right">
<Link to="/login">Log in</Link>
</div>
</div>
{child.render()} // HERE IS THE CHILD TO RENDER
</div>
);
Base.propTypes = {
child: PropTypes.object.isRequired
};
export default Base;
然后,在app.jsx中,ReactDom.render()
所在的位置,我有:
import React from 'react';
import ReactDom from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import LoginPag from './components/LoginPag.jsx';
import Base from './components/Base.jsx';
import HomePage from './components/HomePage.jsx';
// for MaterialUI to work properly
injectTapEventPlugin();
const TestLogin = (props) => {
return (<Base child={LoginPag} />);
};
const TestBase = (props) => {
return(<Base child={HomePage}/>)
};
ReactDom.render((<BrowserRouter><MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<Switch>
<Route exact path="/" component={TestBase} />
<Route exact path="/login" component={TestLogin}/>
</Switch>
</div>
</MuiThemeProvider>
</BrowserRouter>), document.getElementById('react-app'));
最后,HomePage和LoginPag看起来很像,这里是HomePage.jsx:
import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';
const HomePage = {
render() {
return (<Card className="container">
<CardTitle title="React Application" subtitle="This is the home page." />
</Card>);
}
};
export default HomePage;
我现在的问题是:是否有可能摆脱这些抽象TestLogin
和TestBase
?
我的最终目标是拥有这样的东西:
<Route exact path="/" component={Base(HomePage)} />
,也就是说摆脱抽象层并直接将其渲染成一行。
提前致谢。
编辑:感谢anuragasaurus,我可以实现我想要的目标。我也可以上课吗?该类声明为class LoginPage extends React.Component
并具有render()
方法。
答案 0 :(得分:2)
您可以使用render
以内联方式显示您的组件,
<Route exact path="/" render={()=><Base child={HomePage} />} />
<Route exact path="/login" render={()=><Base child={LoginPage} />}/>
答案 1 :(得分:1)
使用简单的对象和类:
const Base = ({ child }) => (
<div>
<div className="top-bar">
<div className="top-bar-left">
<NavLink to="/">React App</NavLink>
</div>
<div className="top-bar-right">
<Link to="/login">Log in</Link>
</div>
</div>
{child}
</div>
);
和
const TestLogin = (props) => {
return (<Base child={<LoginPage/>} />);
};
const TestBase = (props) => {
return(<Base child={<HomePage}/>/>)
};
回答整个问题:
<Route exact path="/" render={()=><Base child={<HomePage/>} />} />
<Route exact path="/login" render={()=><Base child={<LoginPage/>} />}/>