时间戳

首页 > 解决方案 > 如何使用 react hooks 来检查 props 并渲染正确的组件？(HOC)

reactjs - 如何使用 react hooks 来检查 props 并渲染正确的组件？(HOC)

问题描述

最初，props 中没有属性国家。所以，如果props中没有country属性，我需要显示加载消息，但问题是即使属性country确实存在，它也会继续渲染加载元素。因此，国家财产会在某个时间后出现，并且必须进行检查。我不确定这样做是否正确。

const loadingComponent = (WrappedComponent) => {
  return (props) => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      if (props.country) return setLoading(false);
    }, [props]);

    return !loading ? <WrappedComponent {...props} /> : <p>Loading ...</p>;
  };
};

我试图避免使用类顺序组件。或者任何其他方法来创建加载 hoc？谢谢

标签： reactjsreact-hooksreact-hoc

解决方案

在这种情况下，您实际上不需要状态。如果 prop 存在则渲染组件，如果不存在则渲染加载：

const loadingComponent = WrappedComponent =>
  props => 
    props.country ? 
      <WrappedComponent {...props} /> 
      : 
      <p>Loading ...</p>;

我会创建一个更通用的组件，它接受一个谓词来检查是否需要加载：

const loadingComponent = (predicate, WrappedComponent) =>
  props => 
    predicate(props) ? 
      <WrappedComponent {...props} /> 
      : 
      <p>Loading ...</p>;

然后你可以像这样使用它：

const Wrapped = (props => 'country' in props, ComponentX);

或者检查其他东西

const Wrapped = (({ a }) => a < 5, ComponentY);

推荐阅读