如何将道具传递给React Router的子项？

Question

我查了这个链接

到目前为止,我无法理解这handler部分内容.所以我希望有一个更简单的例子呢？

这是我的主要父组件:

class appTemplate extends React.Component {
    render() {
        return (
            <div>
                <Header lang={this.props.route.path}/>
                {this.props.children}
                <Footer lang={this.props.route.path}/>
            </div>
        );
    }
}

我想要做的是将道具传递this.props.route.path给我的子组件this.props.children.

即使我在过去的几个月里一直在接触React,但我并不是完全熟悉所有术语.

将非常感谢有正确解释的示例.谢谢.

Answer 1

实现这一目标的正确方法是使用 React.Children.map()

class appTemplate extends React.Component {
    render() {
        return (
            <div>
                <Header lang={this.props.route.path}/>
                {React.Children.map(
                       this.props.children,
                       child => React.cloneElement(child,
                                   { 
                                      customProp: "Here is your prop",
                                      path: this.props.route.path
                                   })
                )}
                <Footer lang={this.props.route.path}/>
            </div>
        );
    }
}