Question

我的应用程序有一个导航栏，下面有一个显示所有帖子的显示。

以下是设置方式：

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={CreatePost}/>
        </Route>

        <Route path="*" component={NotExist}/>
    </Router>
)

所以，如果你点击＆＃34; New＆＃34;在导航栏中，您将转到server/submit，系统会显示一个表单，您可以在其中输入新帖子的详细信息。在提交时，它会将详细信息添加到posts状态对象。

在App内部，我有一个名为addToPosts（）的函数。

render : function() {
        //<CreatePost addPostToPosts={this.addPostToPosts} posts={this.state.posts}/>
        return (
            <div>
                <NavigationBar/>
                    {this.props.children}
                <DisplayPosts postData={this.state.posts} />
            </div>
        )
    }

@ kirill-fuchs昨天告诉我使用{this.props.children}发送属性。但是，当我检查反应控制台时，我发现道具是空的。但是，我知道它正在做某事，因为如果我摆脱{this.props.children}然后点击New并不做任何事情。但是当我把它放回去时，它会重定向到表格。

另外，当我点击表单中的提交时，它说this.props.addToPosts不是一个函数，因为道具是空的。

有人可以帮帮我吗？

Answer 1

听起来你想把道具传给孩子们。您可以使用以下方法执行此操作：

{React.cloneElement(this.props.children, {addToPosts: this.addPostToPosts, posts: this.state.posts})}

这会将道具传递到CreatePost组件，然后在按下提交按钮时可以调用它。

无法从父级访问功能 - 从父级向子级发送道具

1 个答案: