reactjs - ReactJs - 条件渲染或隐藏组件

Question

在条件渲染或隐藏组件之间进行选择的实际方法是{ display: 'none' }什么？

为了便于讨论，假设我有一个FilterComponent包含title过滤器的，以及一个、和FilterItems的name列表amount。

简而言之，aFilterComponent可以是：

颜色

蓝色 (19)
黄色 (17)
橙色 (3)
黑色 (7)
绿色 (10)

+ Show More

按下Show More按钮时，FilterItem会显示更多的s，即

颜色

蓝色 (19)
黄色 (17)
橙色 (3)
黑色 (7)
绿色 (10)
棕色 (17)
粉红色 (88)
白色 (55)
红色 (32)
紫色 (17)

- Show Less

我应该隐藏FilterItems 下面的 sShow More吗？或者我应该为下面的那些返回 null 并在用更新状态后渲染它们Show More？

score 7 · Accepted Answer

我认为有几种方法可以完成您所需要的。但是，这似乎是最实用的：

{myConditionIsTrue && <MyComponent />}

在您的情况下，使用状态是有意义的。我会在 FilterComponent 中有一个名为的道具showFullList

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

只是疲倦，这种机制实际上是删除/添加到 DOM。

score 2 · Accepted Answer

通常在 React 中，最好不渲染某些东西，而不是将其渲染为隐藏。这是一个相关的讨论： https ://discuss.reactjs.org/t/conditional-rendering-or-toggling-hidden-classes/2535/6

score 1 · Accepted Answer

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

猜猜这个问题没有对错=）

score 1 · Accepted Answer

在单击 Show More 并且状态已更新之前不渲染不应显示的项目会更有意义。这样，您可以在单击之前处理默认情况下应显示的项目数Show More。通过这种方式，您可以对 all 使用完全相同的逻辑，而不是对某些元素应用内联样式或特殊类FilterItems，但只渲染X它们。

score 1 · Accepted Answer

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

{ isHidden &&

...

score 1 · Accepted Answer

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

score 0 · Accepted Answer

另一种基于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 上上传了代码，你可以在这里查看

score 0 · Accepted Answer

我更喜欢两种方法：

#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

score -1 · Accepted Answer

您可以使用一个名为 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> )

reactjs - ReactJs - 条件渲染或隐藏组件

9 回答 9

Related

Reference