Reactjs 如何使用ReactiveBase有条件地呈现搜索结果

我试图从内部有条件地渲染结果组件，但每次尝试使用三元运算符时，都会中断渲染。如果我删除三元，结果将显示

我正在使用

组件在我的结果组件中显示结果

我只希望在用户实际提交搜索查询时显示结果。那么，如何仅在用户提交查询后才有条件地从内部呈现结果组件呢

以下是我目前的代码：

import React, { Component } from 'react';
import { Redirect, withRouter } from 'react-router-dom';
import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch';

import Results from '../../components/appbaseio-search/Results';

class SearchContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false,
      loading: false,
    };
  }

  render() {
    const { pathname } = this.props;
    const { value, loading } = this.state;

    const { redirect } = this.state;
    if (redirect ) {
      return (
        <Redirect
          to={{
            pathname: '/search',
            search: `?q="${value}"`,
          }}
        />
      );
    }

    return (
      <ReactiveBase
        ...>
          <DataSearch
            ...
            />
          { pathname === '/results'
            ? <Results />
          : null
          }
        </ReactiveBase>
    );
  }
}

export default withRouter(SearchContainer);

import React，{Component}来自'React'；
从“react router dom”导入{Redirect，withRouter}；
从'@appbaseio/reactivesearch'导入{ReactiveBase，DataSearch}；
从“../../components/appbaseio search/Results”导入结果；
类SearchContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
重定向：false，
加载：false，
};
}
render（）{
const{pathname}=this.props；
const{value，load}=this.state；
const{redirect}=this.state；
如果（重定向）{
返回(
);
}
返回(
{pathname==='/results'
? 
：null
}
);
}
}
使用路由器导出默认值（SearchContainer）；

您考虑过使用React路由器吗？或者，您可以使用状态而不依赖路径

例如：

render（）{
const{results}=this.state；
if（results | | results.length==0）{
回报率（…）；
}否则{
返回（）；
}
}

归根结底，它只是放置了另一个状态块，并使用componentDidMount更新它

this.state = {
   ...
   loading: true,
 };


componentDidMount() {
 const { location } = this.props;
 this.setState({ loading: false });
}

然后在render（）之后

然后是有条件的

{ loading === false && location.pathname === '/results'
   ? <Route path="/results" component={Results} />
   : null }

{loading==false&&location.pathname==='/results'
? 
：null}

---

您也可以只渲染组件

，而不使用RR4-

-我尝试了这两种方法-它们都可以正常工作。

我已经在应用程序中使用了React Route，并且工作正常。我想让它保持简单，只使用三元运算符，但我要试试你的例子，看看它是否works@user3125823三元运算符并不总是最好的方法；你甚至可以考虑让结果组件有一个属性传入它并渲染<代码> Real.Stabor < /Cord>并处理该组件中的逻辑而不是在SeaCuulink容器中。但是，我仍然只希望结果显示是否在“/results”路径上？@user3125823将您的答案发布为社区wiki，以便我和其他人可以努力改进答案：D

{ loading === false && location.pathname === '/results'
   ? <Route path="/results" component={Results} />
   : null }