React - 单击时添加活动类

Question

我已经阅读并尝试了许多解决方案，但我是 React 新手，我不知道如何在单击 div 时添加“活动”类。有人可以向我解释一下吗？这是我的代码..我想在单击时将“活动”添加到“div className ='section-chat'”并将其从之前活动的元素中删除。我包括到目前为止的两个文件。对我来说最大的问题是我有来自一个对象的数据，如果我尝试添加一个类切换，我不确定如何将所有东西组合在一起。

import React from "react";
import "./Group-Chat.scss";

export const Chats = ({
  name,
  avatar,
  time,
  status,
  message,
  phone,
  notification,
  menu,
}) => {
  if (!menu)
    return (
      <div className="section-chat">
        <div className="chat">
          <div className="chat-left">
            <div className="chat-photo">
              <img src={avatar} alt="" />
            </div>
            <div className="chat-middle">
              <div className="chat-middle-top">
                <img src={status} alt="" />
                <span className="group-name">{name}</span>
                <div className="chat-middle-bottom">{message}</div>
              </div>
            </div>
          </div>
          <div className="chat-right">
            <div className="chat-time">{time}</div>
            <div className="right-chat-icons">
              <div className="phone">
                <img src={phone} alt="" />
              </div>
              <div className="icon">
                <img src={notification} alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  else if (!notification)
    return (
      <div className="section-chat">
        <div className="chat">
          <div className="chat-left">
            <div className="chat-photo">
              <img src={avatar} alt="" />
            </div>
            <div className="chat-middle">
              <div className="chat-middle-top">
                <img src={status} alt="" />
                <span className="group-name">{name}</span>
                <div className="chat-middle-bottom">{message}</div>
              </div>
            </div>
          </div>
          <div className="chat-right">
            <div className="chat-time">{time}</div>
            <div className="right-chat-icons">
              <div className="icon">
                <img src={phone} alt="" />
              </div>
              <div className="icon">
                <img src={menu} alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  else if (!notification && !menu)
    return (
      <div className="section-chat">
        <div className="chat">
          <div className="chat-left">
            <div className="chat-photo">
              <img src={avatar} alt="" />
            </div>
            <div className="chat-middle">
              <div className="chat-middle-top">
                <img src={status} alt="" />
                <span className="group-name">{name}</span>
                <div className="chat-middle-bottom">{message}</div>
              </div>
            </div>
          </div>
          <div className="chat-right">
            <div className="chat-time">{time}</div>
            <div className="right-chat-icons">
              <div className="icon">
                <img src={phone} alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  else
    return (
      <div className="section-chat">
        <div className="chat">
          <div className="chat-left">
            <div className="chat-photo">
              <img src={avatar} alt="" />
            </div>
            <div className="chat-middle">
              <div className="chat-middle-top">
                <img src={status} alt="" />
                <span className="group-name">{name}</span>
                <div className="chat-middle-bottom">{message}</div>
              </div>
            </div>
          </div>
          <div className="chat-right">
            <div className="chat-time">{time}</div>
            <div className="right-chat-icons">
              <div className="icon">
                <img src={phone} alt="" />
              </div>
              <div className="icon">
                <img src={notification} alt="" />
              </div>
              <div className="icon">
                <img src={menu} alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
};```



    import React from "react";
    import "./Group-Chat.scss";
    import { chatData } from "../data";
    import { Chats } from "./Chat-container";
    
    export const DirectChats = () => {
      return (
        <>
          <DirectChatHeader />
          <div className="chat-container" id="section">
            {chatData.map((data, key) => {
              return (
                <div key={key}>
                  <Chats
                    key={key}
                    name={data.name}
                    avatar={data.avatar}
                    time={data.time}
                    status={data.status}
                    message={data.message}
                    phone={data.phone}
                    notification={data.notification}
                    menu={data.menu}
                  />
                </div>
              );
            })}
          </div>
        </>
      );
    };
    
    const DirectChatHeader = () => {
      return (
        <div className="section-title">
          <span>Direct Messages</span>
          <div className="plus-icon" id="container">
            <img src={require("../images/icons/plus.png")} alt="" />
          </div>
        </div>
      );
    };

Answer 1

您需要在组件中保持active 状态。例如：

const Chat ({  name,
  avatar,
  time,
  status,
  message,
  phone,
  notification,
  menu,
}) => {
const [active, setActive] = React.useState(false)
return (
 // div you want to change
 <div className={active ? "section-chat-active" : "section-chat"}>{/* child components here */}</div>
// ...rest of component
 )
}

如果您想为多个 div 切换类，您需要通过一些标识符（如 id）跟踪它们，然后根据 id 是否处于活动状态附加 active 类.

Answer 2

这可以更干净，但只是为了让它工作。您想使用动态类和useState 来更改它： 试试这个：

    import React, { useState } from "react";
    import "./Group-Chat.scss";

    export const Chats = ({
      ...
    }) => {
      const [chatClassName, setChatClassName] = useState('section-chat');

      const toggleClass = () => {
        if (chatClassName === 'section-chat') {
            setChatClassName('section-chat active');
        } else {
            setChatClassName('section-chat');
        }
      }
      if (!menu)
        return (
          <div className={chatClassName} onClick={toggleClass}>

或者如果你想在 jsx 代码中保留类名（首选）：（注意 'active' 之前的额外空格）

    import React, { useState } from "react";
    import "./Group-Chat.scss";

    export const Chats = ({
      ...
    }) => {
      const [active, setActive] = useState(false);

      const toggleClass = () => {
        setActive(!active);
      }
      if (!menu)
        return (
          <div className={`section-chat ${active? ' active' : ''}`} onClick={toggleClass}>