Question

我在我的应用中设置了此设置

<App>
  <DynamicView />
</App>

App应该呈现其子DynamicView的title属性。我试过了

<h1>{children[0].props.title}</h1>

但该属性为空，因为DynamicView是connected Redux组件。所以实际的反应树看起来像这样：

<App>
  <Connect(DynamicView) ...>
    <DynamicView title="A Title"/>
  </Connect(DynamicView)>
</App>

connect是否提供了访问其连接组件属性的方法？

Answer 1

您可以通过访问孩子的孩子来实现一种方法：

<h1>{children[0].props.children[0].props.title}</h1>

然而，这违反了与其子女隔离的React philosophy个父组件。

更符合React / Redux原则的替代方法是将标题放在redux存储中（看起来你已经这样做了，考虑到DynamicView将其作为道具）。您可以使App组件成为从商店中获取标题的连接组件，并将其作为道具传递到App。

class App extends React.Component {
    render() {
         return (
             <div>
                 <h1>{this.props.title}</h1>
                 <DynamicView />
             </div>
         );
    }
}

export default connect(
    state => ({
        title: state.title
    })
)(App);

让AppBar组件呈现其子项的title属性

1 个答案: