如何在 React 中有条件地显示组件

2019-08-02 08:00:00 · 飞浪

介绍说到使用React进行条件渲染，您有很多选择。有些可能比其他的更直观，但不要忽略那些难以理解的。它们可以更简洁，而且一旦习惯了就会更容易理解。即使您决定不以这种方式编写代码，您也会

介绍

说到使用 React 进行条件渲染，您有很多选择。有些可能比其他的更直观，但不要忽略那些难以理解的。它们可以更简洁，而且一旦习惯了就会更容易理解。即使您决定不以这种方式编写代码，您也会经常在代码中遇到最后两个选项（使用&&和三元组），因此熟悉它们是很好的。

选项 1 - 如果组件

假设您有一个Home组件，并且根据用户是否有帖子，您想要显示Posts组件或NoPosts组件。

如果你熟悉 Angular 和ng-if指令，你可能会想编写这样的If组件：

      const If = ({ condition, children }) => {
  if (condition) {
    return children;
  }
};
    

仅当满足条件时，才会渲染组件的子项。你可以像这样使用它：

      const Home = ({ posts }) => {
  return (
    <If condition={posts}>
      <Posts posts={posts} />
    </If>
  );
};
    

虽然你当然可以在 React 中做到这一点，但还有其他更简洁的条件渲染方式。

选项 2——IIFE

或者你可能想要在 SJX 中编写一个if语句，如下所示：

      const Home = ({ posts }) => {
  return (
    <div>
      {if (posts) {
        <Posts posts={posts} />
      } else {
        <NoPosts />
      }}
    </div>
  )
}
    

但这不起作用，因为if语句不是表达式。要使其成为表达式，您可以使用立即调用函数表达式 (IIFE)。

      const Home = ({ posts }) => {
  return (
    <div>
      {(() => {
        if (posts) {
          return <Posts posts={posts} />;
        } else {
          return <NoPosts />;
        }
      })()}
    </div>
  );
};
    

选项 3 - 变量

您还可以使用有条件地设置不同 JSX 值的变量：

      const Home = ({ posts }) => {
  const postsSection = posts ? <Posts posts={posts} /> : <NoPosts />;

  return <div>{postsSection}</div>;
};
    

选项 4 - 渲染函数

您也可以将该变量提取到函数中。

      const renderPosts = posts => (posts ? <Posts posts={posts} /> : <NoPosts />);

const Home = ({ posts }) => <div>{renderPosts(posts)}</div>;

我不太喜欢在 React 中编写渲染函数，因为它太接近于一个组件了。

选项 5 - 组件

除了渲染函数之外，您还可以将其作为渲染Posts或NoPosts的小组件。

      const Posts = ({ posts }) => (posts ? <Posts posts={posts} /> : <NoPosts />);

const Home = ({ posts }) => (
  <div>
    <Posts posts={posts} />
  </div>
);
    

选项 6 - 三元

如果您的逻辑足够简单，您可以在 JSX 中使用三元组。

      const Home = ({ posts }) => (
  <div>{posts ? <Posts posts={posts} /> : <NoPosts />}</div>
);
    

如果你愿意的话，你也可以嵌套三元运算符。

      const Home = ({ posts }) => (
  <div>
    {posts ? (
      <Posts posts={posts} />
    ) : firstLogin ? (
      <Onboarding />
    ) : (
      <NoPosts />
    )}
  </div>
);
    

选项 7 - And 运算符

如果您的逻辑很简单，比如显示一个组件或不显示任何内容，那么您可以在三元组中返回一个null ：

      {
  posts ? <Posts posts={posts} /> : null;
}
    

更简洁的方法是使用“与”运算符（&&）。

      {
  posts.length > 0 && <Posts posts={posts} />;
}
    

这是可行的，因为在 React 中，null和false不会渲染任何内容，而&&运算符会返回第一个假值或第二个值。因此，如果posts.length大于 0，则它将渲染Posts组件；否则，它将不渲染任何内容。

如果组件需要隐藏自身怎么办？

所有这些示例都是关于是否渲染组件的，但你实际上可能希望组件负责是否渲染自身的逻辑。你可以这样做。组件可以有条件地返回一些 JSX 或null，如下所示：

      const Posts = ({ isDistractionFreeMode, posts }) => {
  if (isDistractionFreeMode) {
    return null;
  }

  return (
    <div>
      {posts.map(p => (
        <div>{p.excerpt}</div>
      ))}
    </div>
  );
};
    

结论

在 React 中，有很多方法可以有条件地渲染组件或纯 JSX，因为在 JavaScript 中有很多方法可以有条件地执行操作。您甚至可以使用switch语句。您使用哪种方式取决于偏好和特定用例。而且，如果您选择了一种并决定稍后更改，您可以随时从一种形式重构为另一种形式。

有关更多示例，请查看 React 文档中的以下文章：

条件渲染 – React

JSX 中的 If-Else | React

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中有条件地显示组件

杭州电子商务研究院

6年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const Home = ({ posts }) => { return ( <div> {(() => { if (posts) { return <Posts posts={posts} />; } else { return <NoPosts />; } })()} </div> ); };

const Posts = ({ isDistractionFreeMode, posts }) => { if (isDistractionFreeMode) { return null; } return ( <div> {posts.map(p => ( <div>{p.excerpt}</div> ))} </div> ); };