如何使用 React js 动态更新 className？

Question

我有一个 Collection 组件，当我单击该组件中的 div 时，我想同时更改 Collection 组件的 className 和 Collection 组件之后的第一个兄弟组件的 className。

使用 UseState，我只能更改我所在组件的类名。

我的 Collection.js 看起来像这样：

const Collection = () => {
  const [toggleClass, setToggleClass] = useState(false);

  function handleClick() {
    setToggleClass((toggleClass) => !toggleClass);
  }

  let toggleClassCheck = toggleClass ? "passive" : "active";

  return (
    <React.Fragment>
      <div className={`step ${toggleClassCheck}`}>
        <div className="atrium">
          <span>Collection</span>
        </div>
        <div className="content">
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >

谁能帮我完成我上面提到的过程？

Answer 1

React 组件基于 state 重新渲染。 所以你应该使用你的 state 来定义 className 而不是 boolean。

当您的 state 更改时，组件将重新渲染。

尝试这个：

   const Collection = () => {
  const [toggleClass, setToggleClass] = useState("active");

  function handleClick() {
    setToggleClass((prevState) => prevState == "active" ? "passive" : "active" );
  }

  return (
    <React.Fragment>
      <div className={`step ${toggleClass}`}>
        <div className="atrium">
          <span>Collection</span>
        </div>
        <div className="content">
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >

Answer 2

我不太明白你想要什么，但如果你想影响在“Collection”内部执行 function 的组件“Collection”的兄弟姐妹，你绝对应该尝试“ref”。 通过 useRef 挂钩。

export const Collection = () => {
const [toggleClass, setToggleClass] = useState(false);
const divRef = useRef(null);

function handleClick() {
  divRef.current.nextSibling.classList.toggle('active');
  divRef.current.nextSibling.classList.toggle('passive');
  setToggleClass((toggleClass) => !toggleClass);
}

let toggleClassCheck = toggleClass ? 'passive' : 'active';

return (
<>
  <div className={`step ${toggleClassCheck}`} ref={divRef}>
    <div className="atrium">
      <span>Collection</span>
    </div>
    <div className="content">
      <div className="moreThenOne" onClick={handleClick}>
        CLICK ZONE
      </div>
    </div>
  </div>
</>
);
};