Question

我如何在AppContainer和Home组件之间共享状态？

例如，我希望将结果对象置于AppContainer的状态，以将其传递给所有其他组件。

在这个应用程序中我不使用Redux。

我尝试在AppContainer中使用React.cloneElement但生成错误：

元素类型无效：需要一个字符串（用于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从您定义的文件中导出组件。

index.js

scala> df1.select(df1.col("PlayWeek.TicketSales.PlayDate._Date")).show()
org.apache.spark.sql.AnalysisException: cannot resolve 'PlayWeek.TicketSales.PlayDate[_Date]' due to data type mismatch: argument 2 requires integral type, however, '_Date' is of string type.;
        at org.apache.spark.sql.catalyst.analysis.package$AnalysisErrorAt.failAnalysis(package.scala:42)
        at org.apache.spark.sql.catalyst.analysis.CheckAnalysis$$anonfun$checkAnalysis$1$$anonfun$apply$2.applyOrElse(CheckAnalysis.scala:65)
        at org.apache.spark.sql.catalyst.analysis.CheckAnalysis$$anonfun$checkAnalysis$1$$anonfun$apply$2.applyOrElse(CheckAnalysis.scala:57)
        at org.apache.spark.sql.catalyst.trees.TreeNode$$anonfun$transformUp$1.apply(TreeNode.scala:335)
        at org.apache.spark.sql.catalyst.trees.TreeNode$$anonfun$transformUp$1.apply(TreeNode.scala:335)
        at org.apache.spark.sql.catalyst.trees.CurrentOrigin$.withOrigin(TreeNode.scala:69)
        at org.apache.spark.sql.catalyst.trees.TreeNode.transformUp(TreeNode.scala:334)

AppContainer.js

<Router history={browserHistory}>
    <AppContainer>
        <Route path="/" component={Home} />
        <Route path="search" component={Search} />
    </AppContainer>
</Router>

Answer 1

React.cloneElement是正确的方法。例如：

render() {
    const childProps = {
        prop1: this.state.prop1
    }
    return (
            <div className="containerApp">

                {React.cloneElement(this.props.children, childProps)}

            </div>
    );
}

如果这给你提供了之前收到的错误，那么我能想到的唯一原因就是AppContainer在任何路由匹配之前都没有任何子节点。您可以通过AppContainer中的有条件渲染来缓解这种情况：

render() {
    const childProps = {
        prop1: this.state.prop1
    }

    const { children } = this.props;
    return (
            <div className="containerApp">

                {children && React.cloneElement(children, childProps)}

            </div>
    );
}

将props从容器组件传递到嵌套路由组件

1 个答案: