reactjs中的切换类答案

【问题标题】：toggleClass in reactjsreactjs中的切换类
【发布时间】：2023-03-31 23:45:01
【问题描述】：

我正在尝试在 reactjs 中切换类。我知道如何在 Jquery 中执行此操作，但我需要在 reactjs 中执行此操作。我正在尝试应用切换的选择器和类如下所示。我也在底部附上了我的代码。

$("#story-img:first").toggleClass("uk-width-1-1@s uk-width-2-3@m");

 const Layout = (props) => {
  return (
    <>
      <ul class="uk-grid-divider uk-child-width-1-1" uk-grid="true">
        <li>
          <div className="uk-position-relative" uk-grid="true">
            <div id="story-img" className="uk-width-1-1@s uk-width-1-2@m">
              <img src={props.img} />
            </div>
            <div id="story-text" className="uk-width-1-1@s uk-width-1-2@m">
              <p className="uk-text-meta uk-margin-small">{props.date}</p>
              <h3 className="uk-card-title uk-text-bold uk-margin-remove">{props.title}</h3>
              <p className="uk-text-small uk-margin-small">
                {props.label} &nbsp;|&nbsp; {props.description}
              </p>
              <p className="uk-text-small uk-text-uppercase" style={{ color: "#000!important;" }}>
                <a href={props.link}>{props.readMore}</a>
              </p>
            </div>
            <a href={props.link} className="uk-position-cover"></a>
          </div>
        </li>
      </ul>
    </>
  )
};

export default Layout

我是 reactjs 新手，请指导我解决这个问题。感谢您为帮助我付出的时间和精力。

【问题讨论】：

为什么你认为你需要在 React 中切换类，在那里你可以在 JSX 中动态设置类？
因为我只需要为第一个列表项应用该类。
不过，为什么你认为你不能在 React 中做到这一点？

标签： reactjs next.js

【解决方案1】：

您可以为此使用状态：

const Layout = (props) => {
  const [className, setClassName] = useState('');

  const handler = () => {
    // This is the handler that's called for toggling class
    if (!className) {
      setClassName('some-class-to-add');
    } else {
      setClassName('');
    }
  };

  return (
    <>
      <ul class="uk-grid-divider uk-child-width-1-1" uk-grid="true">
        <li>
          <div className="uk-position-relative" uk-grid="true">
            <div id="story-img" className={`uk-width-1-1@s uk-width-1-2@m ${className}`}>

【讨论】：