reactjs - 有条件地渲染 DataSearch 组件

Question

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

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

我已经看过这个和这个，但我不确定如何在 ReactiveSearch 的 DataSearch 组件的上下文中实现这些。

更新：

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

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

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

Answer 1

你试过这些吗？

{condition && <DataSearchComponent/>}

或者

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