如何使用React-Router Redirect将Props传递给另一个组件

时间:2018-04-30 09:47:24

标签: javascript reactjs redirect react-router-v4 react-props

我有一个纯粹的React应用程序(没有外部状态容器),我使用List<String> getFieldNames(@NotNull String str) { final String regex = "\\$(\\w+)\\$"; Pattern pattern = Pattern.compile(regex); Matcher matcher = pattern.matcher(str); List<String> fields = new ArrayList<>(); while (matcher.find()) { fields.add(matcher.group(1)); } return fields; } 。在这个应用程序中,我有一个组件react-router,其中包含两个子<SearchMain />组件,基本上是一个包含元素以执行搜索的表单和一个以表格形式显示结果的<Search />组件

<DisplayResults />组件内部,我有两个按钮,一个用于以表格形式显示数据,另一个用于以日历形式显示数据。这两个按钮的<Search />个事件通过两个箭头函数连接到onClick父组件,这两个箭头函数传递为<Search />propsupdateTableData

两个函数都执行搜索并将结果存储在handleShowCalendar中。 this.state.searchResultsupdateTableData组件中显示结果,<DisplayResults />希望在另一个组件handleShowCalendar中显示日历中的结果,并链接到路径'/ displayCalendar'。 我想使用<DisplayCalendar />声明性组件,而不是使用<Redirect />。在下面的解决方案中,我能够通过URL的查询字符串发送数据,但这不是我寻找的解决方案,我想传递这些数据的方式与从父组件传递到子组件的道具相同。我在网上寻找信息,但我无法找到解决问题的方法。我发现最接近的是使用

history.push()

但是如何使用<Route path='/displayCalendar' render={(props) => <DisplayCalendar {...props} searchResults={this.state.searchResults} />} /> 以编程方式更改<Route />并在按钮点击时传递我的组件状态?

<Redirect />

0 个答案:

没有答案