Question

我已查看此link

到目前为止，我无法理解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>
        );
    }
}

Answer 2

React有一个cloneElement函数。我们的想法是克隆子对象，将路径作为道具的一部分传递：

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

然后，您应该能够在子元素中使用this.props.path访问路径，但是（从我记忆中）不能从嵌套在子元素中的元素内访问。

您可以在此处阅读有关克隆和传递值的更多信息： https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

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

2 个答案: