加载时如何跳过渲染 React 功能组件的元素？

Question

我在 React 中有一个简单的功能组件，用于呈现搜索结果。 如果有结果，则呈现用户名，如果没有结果，则呈现消息no public records found 。 问题是在加载组件时会呈现消息，而我只想在serp数组中没有结果时才显示它。 我不想仅仅因为这个而将它更改为 class 组件，而且我确信有一种方法可以在组件加载时“跳过”消息的呈现。

你能帮忙弄清楚吗？

import React from "react";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";

const SearchResults = ({ auth: { user }, search: { users, loading } }) => {
  let serp;

  if (users.length !== 0) {
    serp = users.map((item, i) => {
      return <div key={i}>{item.name}</div>;
    });
  } else {
    return <div>no public record found</div>;
  }

  return <div className="dashboard-container">{serp}</div>;
};

SearchResults.propTypes = {
  auth: PropTypes.object.isRequired,
  search: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  search: state.search
});

export default connect(mapStateToProps)(withRouter(SearchResults));

Answer 1

您可以像这样使用加载：

const SearchResults = ({ auth: { user }, search: { users, loading } }) => {
  let serp;

  if (users.length !== 0) {
    serp = users.map((item, i) => {
      return <div key={i}>{item.name}</div>;
    });
  } else {
    if (loading) {
      return <div>Loading...</div>;
    } else {
      return <div>no public record found</div>;
    }
  }

  return <div className="dashboard-container">{serp}</div>;
};

Answer 2

由于 SuleymanSah 建议您应该使用loading道具来创建加载效果，以下是我的建议以提高可读性：

1. 创建一个名为withLoading的 HOC，如下所示：

const withLoading = isLoading => WrappedComponent =>
  isLoading ? <div>Loading...</div> : WrappedComponent;

2. 在组件中像这样使用withLoading ：

const SearchResults = ({ auth: { user }, search: { users, loading } }) => {
  ...
  return (
   <div className="dashboard-container">
     {withLoading(loading)(...)}
   </div>;
  )
};

有太多这样的if/else会减慢你在未来阅读代码时的速度。 也请考虑使用带有条件运算符的内联 If-Else 以获得更好的可读性。