在单击react js按钮时添加和删除css文件

当单击React.js按钮时，添加和删除CSS文件可以通过以下步骤完成：

点击React.js按钮触发事件：在React.js中，可以使用onClick事件来监听按钮点击事件。可以在按钮的onClick属性中指定一个处理函数，当按钮被点击时触发该函数。

<button onClick={handleClick}>按钮</button>

在事件处理函数中添加和删除CSS文件：事件处理函数会在按钮被点击时被调用。你可以在这个函数中使用JavaScript来添加和删除CSS文件。

function handleClick() {
  // 添加CSS文件
  const link = document.createElement('link');
  link.href = 'path/to/your/css/file.css';
  link.rel = 'stylesheet';
  document.head.appendChild(link);

  // 删除CSS文件
  const cssFiles = document.querySelectorAll('link[href="path/to/your/css/file.css"]');
  cssFiles.forEach((file) => {
    file.remove();
  });
}

CSS文件的路径和文件名可以根据你的实际情况进行修改。你可以将CSS文件放在公共的文件夹中，然后根据需要在事件处理函数中添加或删除。

在React.js中，还可以使用状态（state）来管理CSS文件的添加和删除。通过设置状态来控制是否显示特定的CSS文件。

import React, { useState } from 'react';

function App() {
  const [showCSS, setShowCSS] = useState(false);

  function handleClick() {
    setShowCSS(!showCSS);
  }

  return (
    <div>
      {showCSS && <link href="path/to/your/css/file.css" rel="stylesheet" />}
      <button onClick={handleClick}>切换CSS文件</button>
    </div>
  );
}

这样，当按钮被点击时，CSS文件会根据状态的变化进行添加或删除。

请注意，以上示例中没有提及腾讯云相关产品和产品介绍链接地址，如需了解腾讯云的相关产品，请访问腾讯云官方网站。