如何在反应性JS中传递CSS类名

Question

每当我单击来自另一个组件的按钮时，我都希望更改组件的宽度。

这是BiCarret中的按钮：

import { useState } from "react";
import { BiCaretLeft } from "react-icons/bi";

const SideBar = () => {
  const [open, setOpen] = useState(true);

  return (
    <div className="relative">
      <BiCaretLeft 
        className={`${
          open ? "w-72" : "w-20"
        } bg-red-400 absolute cursor-pointer -right-3 top-5 border rounded-full`}
        color="#fff"
        size={25}
        onClick={setOpen(!true)}
      />
    </div>
  );
};

export default SideBar;

这是我想在单击时更改宽度的组件

import "./App.css";
import SideBar from "./components/SideBar/SideBar";

function App() {
  return (
    <div className="app flex">
      <aside className="h-screen bg-slate-700"> // change the width here
        <SideBar />
      </aside>
      <main className="flex-1 h-screen"></main>
    </div>
  );
}
export default App;

Answer 1

您有两个简单的解决方案：

1. 创建上下文克里特上下文并在其中存储开放值，在点击和应用程序中对其进行更改。
2. DOM操作在App添加ID到您想要更改的元素中，而在其他组件中的onClick使用document.getElementById(THE_ID).classList.add("new-class-for-increased-width")来获取DOM元素并添加类。

Answer 2

我只是注意到，您想要更改应用程序的旁边标签的宽度。以下是如何做这件事。

import { useState } from "react";
import { BiCaretLeft } from "react-icons/bi";

const SideBar = ({open, setOpen}) => {
  return (
    <div className="relative">
      <BiCaretLeft 
        className={`${
          open ? "w-72" : "w-20"
        } bg-red-400 absolute cursor-pointer -right-3 top-5 border rounded-full`}
        color="#fff"
        size={25}
        onClick={setOpen(!open)}
      />
    </div>
  );
};

export default SideBar;

在App组件中，如下所示：

import "./App.css";
import SideBar from "./components/SideBar/SideBar";

function App() {
  const [open, setOpen] = useState(true);

  return (
    <div className="app flex">
      <aside className={`${open ? 'w-72' : 'w-20'} h-screen bg-slate-700`}> #change the width here#
        <SideBar open={open} setOpen={setOpen} />
      </aside>
      <main className="flex-1 h-screen"></main>
    </div>
  );
}
export default App;

我在上面假设您希望更改子/侧栏组件的值以及App组件中的备用标记。