导航栏作为反应中的布局

Question

我正在创建一个在al页面中有搜索栏的应用程序（如布局）。搜索时会显示结果。您可以单击一个结果获取详细信息，这是另一个组件。

我的问题是将此搜索组件放在所有页面中的位置。当我点击搜索按钮时，细节消失并再次显示结果。

这是应用布局。

任何帮助链接或教程都会感激不尽。

Answer 1

您可以将搜索栏放在标题组件中，并将其添加到每个页面。 当您搜索搜索栏中的任何文本然后输入时，它应该打开详细信息页面。为此，您可以在搜索栏的操作文件中使用以下内容。

onSearchClick(text)(dispatch).then(() => (browserHistory.push(`/search?searchText=${text}`)))

并在下方添加route.jsx文件

<Route path={Config.fullPath("/search")} component={Detail}>
      <Route path=":searchValue"/>
</Route>

并在Detail.jsx文件中提取searchValue为

const searchValue = ownProps.location.query.searchValue;

在此处填写您可以打开任何seacrh值的详细信息页面。

Answer 2

您可以做的是创建一个包含搜索栏和内容容器的Appshell组件，该组件通过道具将子项传递给它。我最近使用这种设计完成了react redux产品，它有两个原因是有效的。

1. 搜索值可以保持在appshell的状态，因此可以传递给任何组件。
2. 此外，这种设计结构非常简洁直观。

这是我项目的link。看一下我的 src / App.js ，然后前往 src / components / Appshell 目录。代码很容易理解。

<Appshell> <SomeOtherComponent/> </Appshell> 

最好的用例是react-router。你可以在我的代码中以及 App.js 文件中看到它。

希望它有所帮助。 A diagram to help you understand the design