如何使用React中的条件在组件中呈现3个SVG中的1个？_在React Jest/React中测试子组件的条件呈现_react js功能组件中的条件呈现 - 腾讯云开发者社区

在React中，我们可以使用条件语句来根据特定条件在组件中呈现不同的SVG。下面是一个示例：

首先，我们需要引入SVG文件，可以使用import语句将SVG文件导入到组件中，如下所示：

import { ReactComponent as SVG1 } from '路径/到/svg1.svg';
import { ReactComponent as SVG2 } from '路径/到/svg2.svg';
import { ReactComponent as SVG3 } from '路径/到/svg3.svg';

接下来，在组件中创建一个状态变量，用于控制要显示的SVG编号，初始值设为1：

import React, { useState } from 'react';

function MyComponent() {
  const [selectedSVG, setSelectedSVG] = useState(1);

  // 其他组件代码

  return (
    <div>
      {selectedSVG === 1 && <SVG1 />}
      {selectedSVG === 2 && <SVG2 />}
      {selectedSVG === 3 && <SVG3 />}
    </div>
  );
}

在上述代码中，我们使用了条件语句来确定要呈现的SVG。通过检查selectedSVG的值，如果等于1，则呈现<SVG1 />；如果等于2，则呈现<SVG2 />；如果等于3，则呈现<SVG3 />。

最后，在需要切换SVG的地方，我们可以使用事件处理函数来改变selectedSVG的值。例如，可以在按钮的点击事件中切换SVG：

function MyComponent() {
  const [selectedSVG, setSelectedSVG] = useState(1);

  const handleSVGChange = (svgNumber) => {
    setSelectedSVG(svgNumber);
  };

  return (
    <div>
      {selectedSVG === 1 && <SVG1 />}
      {selectedSVG === 2 && <SVG2 />}
      {selectedSVG === 3 && <SVG3 />}
      
      <button onClick={() => handleSVGChange(1)}>显示SVG1</button>
      <button onClick={() => handleSVGChange(2)}>显示SVG2</button>
      <button onClick={() => handleSVGChange(3)}>显示SVG3</button>
    </div>
  );
}

通过以上代码，我们可以根据所选择的按钮来切换显示不同的SVG。

推荐腾讯云相关产品：如果您在使用React开发中需要将SVG文件作为静态资源进行加载和管理，您可以使用腾讯云的对象存储（COS）服务来存储和分发这些文件。腾讯云的对象存储（COS）是一种安全、高可靠、低成本的云端存储服务，支持多种存储类别和访问方式，适用于各种规模和类型的应用程序。

您可以通过腾讯云对象存储（COS）了解更多信息和产品介绍：腾讯云对象存储（COS）