2

我试图从ReactiveBase有条件地渲染我的 Results 组件，但是每次我尝试使用三元运算符时，它都会破坏渲染。如果我删除三元，结果显示。

我正在使用该<ReactiveList>组件在我的结果组件中显示结果。

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

到目前为止，这是我的代码：

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);
4

2 回答 2

1

所有它归结为放置另一个状态，并使用 componentDidMount 更新它

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


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

然后在 render() 之后

const { loading } = this.state;

然后是有条件的

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

你也可以只渲染组件<Results />而不是使用 RR4——<Route />我都试过了——它们都工作得很好。

于 2018-12-21T17:22:08.963 回答
0

你考虑过使用 React-Router 吗？或者您可以使用状态而不依赖于路径。

例如：

render() {
  const { results } = this.state;
  if (results || results.length === 0) {
    return (<ReactiveBase>...</ReactiveBase>);
  } else {
    return (<ReactiveBase><Results /></ReactiveBase>);
  }
}
于 2018-12-19T18:55:32.957 回答