时间戳

首页 > 解决方案 > 使用隐藏属性与有条件地渲染组件

javascript - 使用隐藏属性与有条件地渲染组件

问题描述

我最近发现了一种在 JSX 中有条件地渲染组件的替代方法，即使用hiddenHTML 属性。

例子

function Parent() {
  return {!hideChild && <Child />}
}

对比

function Parent() {
  return <Child hidden={hideChild} />
}

function Child({ hidden }) {
  return (
    <div hidden={hidden} >
      //my content
    </div>
  )
}

到目前为止，我在使用hidden. 这么说，隐藏的页面上有很多 HTML 有什么缺点吗？

对我来说，当我想要保留组件状态并具有切换组件 UI 可见性的功能时，这种方法非常有用。

这是不好的做法吗？我们应该有条件地渲染组件吗？

标签： javascripthtmlreactjs

解决方案

不同的是，在使用条件渲染时，如果条件失败，条件渲染UI里面的逻辑将不会被执行。

但是使用 hidden 属性会执行逻辑，但只会隐藏 UI。

例子：

import React from 'react';

const A = () => {
  console.log('A rendrerd');
  return <h1>A</h1>;
};

const B = ({ hidden }) => {
  console.log('B rendrerd');
  return <h1 hidden={hidden}>B</h1>;
};

const Test = () => {
  return (
    <div>
      {false && <A />}
      <B hidden={true} />
    </div>
  );
};

export default Test;

A 永远不会调用它的console.log语句。B 是隐藏的，但它会记录B rendered。

推荐阅读