Javascript 将道具传递给包含多个组件的React路由器_Javascript_Reactjs_Ecmascript 6_React Router

Javascript 将道具传递给包含多个组件的React路由器

javascript reactjs ecmascript-6

Javascript 将道具传递给包含多个组件的React路由器,javascript,reactjs,ecmascript-6,react-router,Javascript,Reactjs,Ecmascript 6,React Router,React路由器v2.5.1 反应v15.1.0 路由配置： <Router history={hashHistory}> <Route path="auth" component={AuthLayout}> <Route path="login" components={{main:LoginForm, footer: LoginFooter}} /> <Route path="register" components={{main

React路由器v2.5.1

反应v15.1.0

路由配置：

<Router history={hashHistory}>
  <Route path="auth" component={AuthLayout}>
    <Route path="login" components={{main:LoginForm, footer: LoginFooter}} />
    <Route path="register" components={{main:RegisterForm, footer: RegisterFooter}} />
  </Route>
</Router>

AuthLayout组件

class AuthLayout extends React.Component {
    render() {
        const { main, footer} = this.props;
        return (
            <div>
                <div>
                    <div className="content clearfix">
                        {main}
                    </div>
                </div>
                {footer}
            </div>
        );
    }
}

export default AuthLayout;

类AuthLayout扩展了React.Component{ render（）{ const{main，footer}=this.props；返回( {main} {footer} ); } } 导出默认布局；问题-如果存在多个组件（即依赖于{main}的组件），您如何从React Router向AuthLayout组件传递道具？应传递不同的道具

我是一个新的反应，所以如果我处理这个错误，请建议。我已经研究过这个主题，但许多解决方案似乎已经过时，并且没有考虑何时可以加载多个组件。

我已经编写了一个解决方案。它使用的是React路由器，而不是React路由器，但我希望您对此持开放态度。您可以看到，我正在将标题道具传递给AuthLayout。我根据主要内容将标题设置为“登录”或“注册”。导航路由器不会为您渲染组件，因此您可以传递任何需要的道具

var {StateNavigator} = Navigation;
var {NavigationLink} = NavigationReact;

var AuthLayout = ({title, stateNavigator}) => (
  <div>
    <h1>{title}</h1>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
)

var Login = ({stateNavigator}) => (
  <NavigationLink
    stateKey="register"
    stateNavigator={stateNavigator}>
    Register
  </NavigationLink>
)

var Register = ({stateNavigator}) => (
  <NavigationLink
    stateKey="login"
    stateNavigator={stateNavigator}>
    Login
  </NavigationLink>
)

var LoginFooter = () => <div>Login Footer</div>
var RegisterFooter = () => <div>Register Footer</div>

var stateNavigator = new StateNavigator([
  {key: 'login', route: ''},
  {key: 'register', route: 'register'}
]);

stateNavigator.states.login.navigated = () => {
  ReactDOM.render(<AuthLayout title="Login" />, 
    document.getElementById('container'));
  ReactDOM.render(<Login stateNavigator={stateNavigator} />, 
    document.getElementById('content'));
  ReactDOM.render(<LoginFooter />, 
    document.getElementById('footer'));
}

stateNavigator.states.register.navigated = () => {
  ReactDOM.render(<AuthLayout title="Register" />, 
    document.getElementById('container'));
  ReactDOM.render(<Register stateNavigator={stateNavigator} />, 
    document.getElementById('content'));
  ReactDOM.render(<RegisterFooter />, 
    document.getElementById('footer'));
}

stateNavigator.start();

var{StateNavigator}=Navigation；
var{NavigationLink}=NavigationReact；
var AuthLayout=（{title，stateNavigator}）=>(
{title}
)
var Login=（{stateNavigator}）=>(
登记
)
变量寄存器=（{stateNavigator}）=>(
登录
)
var LoginFooter=（）=>登录页脚
var RegisterFooter=（）=>寄存器页脚
var stateNavigator=newstatenavigator([
{键：'登录'，路由：'}，
{键：'register'，路由：'register'}
]);
stateNavigator.states.login.navigated=（）=>{
ReactDOM.render（，
document.getElementById（'container'）；
ReactDOM.render（，
document.getElementById（'content'）；
ReactDOM.render（，
document.getElementById（'footer'）；
}
stateNavigator.states.register.navigated=（）=>{
ReactDOM.render（，
document.getElementById（'container'）；
ReactDOM.render（，
document.getElementById（'content'）；
ReactDOM.render（，
document.getElementById（'footer'）；
}
stateNavigator.start（）；

我写了一篇文章。它使用的是React路由器，而不是React路由器，但我希望您对此持开放态度。您可以看到，我正在将标题道具传递给AuthLayout。我根据主要内容将标题设置为“登录”或“注册”。导航路由器不会为您渲染组件，因此您可以传递任何需要的道具

var {StateNavigator} = Navigation;
var {NavigationLink} = NavigationReact;

var AuthLayout = ({title, stateNavigator}) => (
  <div>
    <h1>{title}</h1>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
)

var Login = ({stateNavigator}) => (
  <NavigationLink
    stateKey="register"
    stateNavigator={stateNavigator}>
    Register
  </NavigationLink>
)

var Register = ({stateNavigator}) => (
  <NavigationLink
    stateKey="login"
    stateNavigator={stateNavigator}>
    Login
  </NavigationLink>
)

var LoginFooter = () => <div>Login Footer</div>
var RegisterFooter = () => <div>Register Footer</div>

var stateNavigator = new StateNavigator([
  {key: 'login', route: ''},
  {key: 'register', route: 'register'}
]);

stateNavigator.states.login.navigated = () => {
  ReactDOM.render(<AuthLayout title="Login" />, 
    document.getElementById('container'));
  ReactDOM.render(<Login stateNavigator={stateNavigator} />, 
    document.getElementById('content'));
  ReactDOM.render(<LoginFooter />, 
    document.getElementById('footer'));
}

stateNavigator.states.register.navigated = () => {
  ReactDOM.render(<AuthLayout title="Register" />, 
    document.getElementById('container'));
  ReactDOM.render(<Register stateNavigator={stateNavigator} />, 
    document.getElementById('content'));
  ReactDOM.render(<RegisterFooter />, 
    document.getElementById('footer'));
}

stateNavigator.start();

var{StateNavigator}=Navigation；
var{NavigationLink}=NavigationReact；
var AuthLayout=（{title，stateNavigator}）=>(
{title}
)
var Login=（{stateNavigator}）=>(
登记
)
变量寄存器=（{stateNavigator}）=>(
登录
)
var LoginFooter=（）=>登录页脚
var RegisterFooter=（）=>寄存器页脚
var stateNavigator=newstatenavigator([
{键：'登录'，路由：'}，
{键：'register'，路由：'register'}
]);
stateNavigator.states.login.navigated=（）=>{
ReactDOM.render（，
document.getElementById（'container'）；
ReactDOM.render（，
document.getElementById（'content'）；
ReactDOM.render（，
document.getElementById（'footer'）；
}
stateNavigator.states.register.navigated=（）=>{
ReactDOM.render（，
document.getElementById（'container'）；
ReactDOM.render（，
document.getElementById（'content'）；
ReactDOM.render（，
document.getElementById（'footer'）；
}
stateNavigator.start（）；

嘿@markyph我更喜欢使用AuthLayout，使其看起来像：


const AuthLayout=props=>
{props.children}

页脚和授权布局本质上是“容器”。您可以使用

v3.0.0-alpha.1

中的

withRouter（Component）

从react router随时随地访问道具。它为您的组件提供道具参数和位置

这比在每个关卡都要传递道具要好得多

这项功能有望很快进入主分支

如果这不是一个选项，我会有如下选择：

  const AuthLayout = props =>
        <div>
            <div>
                <div className="content clearfix">
                    {props.children}
                </div>
            </div>
            <Footer {...props}/>
        </div>

const AuthLayout=props=>
{props.children}

要将路由器道具传递给props.children，您可以执行以下操作：

对于这两种方法，您的路由器配置中将包含以下内容

<Route path={'/auth'} component={AuthLayout}>
   <Route path={'forgot'} component={Forgot}/>
   <Route path={'login'} component={Login}/>
</Route>