Question

React Router v2.5.1

React 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;

问题 - 如何将来自React路由器的道具传递给AuthLayout组件，其中有多个组件，即依赖于{main}的组件，应传递不同的道具。

我是新手，所以如果我接近这个不正确，请告知。我已经研究了这个主题，但许多解决方案似乎已经过时，并且在加载多个组件时没有考虑到。

Answer 1

我写了JsFiddle that demonstrates passing props to the AuthLayout component。它使用Navigation router而不是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();

Answer 2

嘿@markyph我更喜欢和AuthLayout一起看起来像：

// getElementByTagName for first child elements works var getForm = document.getElementById("parentElement").getElementsByTagName("form").length; var output = document.getElementById("outputForm").innerHTML = getForm; // getElementByTagName for second child elements doesn't work var getInput = document.getElementById("parentElement").getElementsByTagName("form")[0].getElementsByTagName("input").length; var output = document.getElementById("outputInput").innerHTML = getInput;

页脚和auth布局基本上是“容器”。您可以使用<div id="parentElement"> <form> First name: <input type="text"><br> Last name: <input type="text"><br> </form> </div> <p id="outputForm"></p> <p id="outputInput"></p> const AuthLayout = props => <div> <div> <div className="content clearfix"> {props.children} </div> </div> <Footer/> </div>在withRouter(Component)中为您的组件提供props.params和位置，从而随时随地访问react-router中的道具。

这比在每个级别传递道具要好得多。

这个功能很快就会进入主分支。

如果那不是一个选项，我会有类似的东西：

v3.0.0-alpha.1

将路由器道具传递给props.children您可以执行此处显示的答案：How to pass props to {this.props.children}

对于任何一种方法，您都可以在路由器配置中使用以下内容。

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

将道具传递给包含多个组件的React Router

2 个答案: