ReactJs - 条件渲染或隐藏组件

Question

选择条件渲染还是使用{ display: 'none' }隐藏组件的实际方法是什么？

为了讨论，假设我有一个FilterComponent，它包含筛选器的title和一系列FilterItems，其中包括name和amount。

简而言之，一个FilterComponent可能是这样的：

颜色

- 蓝色（19） - 黄色（17） - 橙色（3） - 黑色（7） - 绿色（10） + 显示更多

点击“显示更多”按钮后，将显示更多的FilterItem，即：

颜色

- 蓝色（19） - 黄色（17） - 橙色（3） - 黑色（7） - 绿色（10） - 棕色（17） - 粉色（88） - 白色（55） - 红色（32） - 紫色（17） - 显示更少

我应该隐藏在“显示更多”以下的FilterItem吗？还是应该返回null并在使用Show More更新状态后渲染它们？

- fasaas

Answer 1

我认为有几种方法可以实现您所需的功能。然而，这似乎是最常用的方法:

{myConditionIsTrue && <MyComponent />}

在您的情况下，使用状态(state)是有意义的。我会在FilterComponent中添加一个名为showFullList的属性(prop)。

{this.state.showFullList && (
 <React.Fragment>
   <All/><The/><Other/><Components/>
</React.Fragment>)}

请注意，这个机制实际上是在DOM中进行删除或添加操作。

- Neal

Answer 2

通常在React中，不渲染某些内容比将其渲染为隐藏更好。以下是相关讨论： https://discuss.reactjs.org/t/conditional-rendering-or-toggling-hidden-classes/2535/6

- Ryan Cogswell

Answer 3

你可以更改isHidden的初始状态值或类似的内容。当你点击按钮时，该值将与之前的情况相反。当你想要渲染时，应给出条件；

{ isHidden &&

...

- Alican Çelik

Answer 4

我会选择“更新状态”的方法。这样，您始终拥有显示在状态中的实际filterItems。因此，您的组件状态同步，并表示当前显示的UI。

尽管如此，我猜这个问题并没有对错之分 =)

- weibenfalk

Answer 5

在单击“显示更多”并更新状态后，不渲染不应显示的项会更有意义。这样，您可以在单击“显示更多”之前处理默认显示多少项。这样，您不必对某些元素应用内联样式或特殊类，而是可以将完全相同的逻辑应用于所有“FilterItems”，但仅呈现其中的“X”个。

- Naismith

Answer 6

我偏爱两种方法：

#1 元素变量

const button = <LogoutButton onClick={this.handleLogoutClick} />;

<div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
</div>

使用逻辑&&运算符的2＃内联if语句

{unreadMessages.length > 0 &&
    <h2>
        You have {unreadMessages.length} unread messages.
    </h2>
}

更多细节请参见：https://reactjs.org/docs/conditional-rendering.html

- Abdelhadi Abdo

Answer 7

通常情况下，使用display: none和条件渲染之间没有明显的性能差异，因为浏览器在两种情况下的行为几乎相同。主要区别在于，如果使用display: none，则节点不会从DOM树中删除，这会强制一些CSS伪选择器（如:last-child）将隐藏的节点视为最后一个子节点等等。因此，这与性能无关，主要与CSS相关。我认为这两种方法都可以使用 :)

- Limbo

Answer 8

基于Array.prototype.slice()方法的另一种方法

在父组件中的使用

import React from "react";
import { ColorList } from "./Color";

export default function App() {
  return <ColorList colors={["red", "green", "blue"]} visibleItemsCount={1} />;
}

而 ColorList 组件看起来像这样：

import React from "react";

// This is just a placeholder component :)
function Color({ color }) {
  return <div style={{ color }}>{color}</div>;
}

export function ColorList({ colors, visibleItemsCount = 0 }) {
  const [showMore, setShowMore] = React.useState(false);

  // Toggle value on click button
  const onClick = () => setShowMore((value) => !value);

  // Memoize the color list when props changed
  const visibleColors = React.useMemo(() => {
    // If show more items, return the whole array
    // Otherwise, return a sliced array based on visible items
    const count = showMore ? colors.count : visibleItemsCount;
    return colors.slice(0, count);
  }, [colors, visibleItemsCount, showMore]);

  console.log(visibleColors);
  return (
    <>
      <h1>Color list</h1>
      <>
        {visibleColors.map((color) => (
          <Color key={color} color={color} />
        ))}
      </>
      <button onClick={onClick}>{showMore ? "Show less" : "Show more"}</button>
    </>
  );
}

注意：我已经将代码上传到 CodeSandbox，你可以在这里检查它。

- Tolotra Raharison

Answer 9

你可以使用一个叫做 react-if 的库。这个库能够帮助你根据条件来决定是否渲染内容。

下面是一个示例：

const Bar = ({ name, age, drinkingAge }) => (
    <div>
        <Header />
        <If condition={ age >= drinkingAge }>
            <Then><span className="ok">Have a beer, {name}!</span></Then>
            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>
        </If>
        <Footer />
    </div> )

- Ramiro Estrella