有条件地渲染 DataSearch 组件答案

【问题标题】：Conditionally render DataSearch component有条件地渲染 DataSearch 组件
【发布时间】：2019-02-18 09:35:00
【问题描述】：

我已经使用 ReactiveSearch 组件构建了一个搜索用户界面，效果很好！现在我试图弄清楚如何根据正在显示的路线/视图有条件地显示我在导航栏中拥有的DataSearch component。

例如在我的主页上。我在 jumbotron 中有一个大的 DataSearch 组件搜索表单，我不需要/想要也显示在导航栏中的 DataSearch 组件。

我查看了 this 和 this，但我不确定如何在 ReactiveSearch 的 DataSearch 组件的上下文中实现它们。

更新：

所以我一直在研究如何从 React Router (v4) 获取 url，看来我可以通过这样做：

componentWillReceiveProps(nextProps) {
                if (nextProps.location !== this.props.location) {
...

然后我想我可以使用location !== '/' && DataSearch 之类的东西，但这不起作用。

【问题讨论】：

【解决方案1】：

你试过这些吗？

{condition && <DataSearchComponent/>}

或

{condition ? <DataSearchComponent/> : <OtherComponent/>}

【讨论】：

Muscala - 感谢您的快速响应。一直在尝试不同的东西，对 React 来说还是有点新，所以试图理解这一切。快速提问 - 我需要设置所有组件的状态，以便导航栏组件知道是否显示 DataSearch？
一旦我弄清楚了条件部分，它就很好用了。