当前位置：首页 > React

react实现v-show

2026-01-27 19:21:58React

在React中实现类似Vue的v-show功能，可以通过控制CSS的display属性来实现元素的显示与隐藏。以下是几种常见的实现方法：

使用内联样式控制display

通过条件判断动态设置style中的display属性：

react实现v-show

function Component({ isVisible }) {
  return (
    <div style={{ display: isVisible ? 'block' : 'none' }}>
      这段内容会根据isVisible显示/隐藏
    </div>
  );
}

使用className切换

定义CSS类并通过条件判断切换：

react实现v-show

/* CSS */
.hidden {
  display: none;
}

function Component({ isVisible }) {
  return (
    <div className={isVisible ? '' : 'hidden'}>
      这段内容会根据isVisible显示/隐藏
    </div>
  );
}

自定义Hook封装

创建一个可复用的自定义Hook：

function useVShow(initialVisible = true) {
  const [isVisible, setIsVisible] = useState(initialVisible);

  const style = {
    display: isVisible ? 'block' : 'none'
  };

  return [style, setIsVisible];
}

// 使用示例
function Component() {
  const [vShowStyle, setVisible] = useVShow(true);

  return (
    <>
      <div style={vShowStyle}>可控制显示的内容</div>
      <button onClick={() => setVisible(!vShowStyle.display === 'block')}>
        切换显示
      </button>
    </>
  );
}

高阶组件实现

创建高阶组件封装显示逻辑：

function withVShow(WrappedComponent) {
  return function({ show, ...props }) {
    return (
      <div style={{ display: show ? 'block' : 'none' }}>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// 使用示例
const MyComponent = withVShow(function({ text }) {
  return <div>{text}</div>;
});

<MyComponent show={true} text="会显示的内容" />

这些方法都能实现类似Vue中v-show的功能，区别在于封装程度和复用性。内联样式最简单，自定义Hook和高阶组件更适合需要复用的场景。