如何通过单击另一个功能组件（另一个文件）内的按钮来切换 div 元素的类？

Question

我想通过单击另一个组件文件内的按钮来切换容器类（文件 2）。

该按钮已经有一个 onClick 函数，我想让它调用两个函数。按钮的两个切换功能和容器的两个类切换。

希望它有意义。

到目前为止，这是我的代码：

按钮组件（文件1）

import React, {useState} from "react";
import "./Sort.scss";

const Sort = () => {

    const [toggleSortIcon, toggleSortIconSet] = useState(false);

    return (
        <div className="tools">
            <button 
            onClick={() => toggleSortIconSet(!toggleSortIcon)} 
            className={`sort ${toggleSortIcon ? "horizontal" : "vertical"}`}>
            </button>
        </div>
    );
}

export default Sort;

我要更改类的Div容器组件（文件2）

import React, {useState} from "react";
import "./WordContainer.scss";
import UseAnimations from "react-useanimations";


const WordContainer = ({title, definition, example}) => {

  const [toggleSize, toggleSizeState] = useState(false);

  return (
    <div className={`container ${toggleSize ? "big" : "small"}`}>
      <div className="content">
        <h2>{title}</h2>
        <p>{definition}</p>
        <h3>Example</h3>
        <p>{example}</p>
      </div>
      <img onClick={() => toggleSizeState(!toggleSize)} src="./resize.svg" alt="resize" className="resize"/>
      <div className="bookmark">
        <UseAnimations
          animationKey="bookmark"
          size={26}
        />
      </div>
    </div>
  );
}

export default WordContainer;

Answer 1

您可以拥有一个全局状态管理系统（redux 或带有自定义挂钩），您可以使用它来存储图标大小。

或者您可以简单地为您的组件提供一个回调，将图标大小存储在父组件中，然后将其反馈给您的 像这样的：

const [size, setSize] = useState(/* default value */);

render() {
  <>
    <Sort onSizeToggle={setSize} />
    <WordContainer size={size} />
  </>
}