ReactJS中如何实现类似Vue v-show的无重渲染条件显示JSX元素？

React没有内置和Vue v-show完全等效的指令，但可以通过CSS样式控制实现相同效果——让元素始终保留在DOM中，仅通过样式切换显隐，避免组件卸载/重新挂载导致的图片重复加载。

核心思路 #

v-show的本质是通过display: none/display: block控制元素可见性，元素始终存在于DOM中。对应到React里，我们只需要给目标组件/元素添加条件样式即可，替代原来的条件渲染逻辑。

直接实现方案 #

把你原来的条件渲染改成样式控制：

<>
  <Blue style={{ display: state === "blue" ? "block" : "none" }} />
  <Red style={{ display: state === "red" ? "block" : "none" }} />
</>

这样Blue和Red组件会一直存在于DOM中，不会因为state变化被卸载，图片加载一次后就会被浏览器缓存，切换状态时不会重新请求。

封装复用方案（可选） #

如果需要在多个地方复用这个逻辑，可以封装一个简单的Show组件：

const Show = ({ children, show }) => {
  return <div style={{ display: show ? "block" : "none" }}>{children}</div>;
};

// 使用方式
<>
  <Show show={state === "blue"}>
    <Blue />
  </Show>
  <Show show={state === "red"}>
    <Red />
  </Show>
</>

或者用自定义Hook返回样式对象：

const useShow = (show) => {
  return { display: show ? "block" : "none" };
};

// 使用方式
const blueVisibility = useShow(state === "blue");
const redVisibility = useShow(state === "red");

return (
  <>
    <Blue style={blueVisibility} />
    <Red style={redVisibility} />
  </>
);

为什么原来的方案会导致图片重新加载 #

你之前用的{state == "blue" && <Blue />}属于条件渲染：当state变化时，不满足条件的组件会被从DOM中完全卸载，满足条件时才重新挂载。组件挂载时会重新渲染内部的图片元素，触发图片请求（即使浏览器有缓存，也可能因为组件重新挂载导致重复加载）。而用样式控制显隐时，组件始终存在，图片资源只会加载一次。

额外说明 #

如果需要保留元素占位空间（类似visibility: hidden的效果），可以把display换成visibility：

style={{ visibility: state === "blue" ? "visible" : "hidden" }}

不过这和v-show的行为不完全一致，根据你的需求选择即可。

内容的提问来源于stack exchange，提问作者matt