Switching between multiple classnames in one element 在一个元素中切换多个类名

huangapple go评论70阅读模式
英文:

Switching between multiple classnames in one element

问题

以下是您要翻译的内容:

我想通过点击按钮在React中在一个元素中切换两个类名当我点击Solution按钮时h1的类名从solution更改为“”,blur的类名保持不变我的目标是在点击Solution按钮时将blur的类名更改为unblur”。

```jsx
import React from 'react';
import { useState, useEffect } from 'react';
import './Celeb.css';
import images from '../Index.json';

function Celeb() {
  const [image, setImage] = useState();
  const [name, setName] = useState();
  const [unblur, setUnblur] = useState(true);
  const [unblurSolution, setUnblurSolution] = useState(true);
  const [imageList, setImageList] = useState(images);
  // 其他代码...
  
  return (
    <div className='celeb'>
      <div className='celeb_buttons'>
        <button className='play_button' onClick={handleNext}>Next</button>
        <button className='play_button' onClick={() => setUnblur(!unblur)}>Start</button>
        <button className='play_button' onClick={() => setUnblurSolution(!unblurSolution)}>Solution</button>
      </div>
      <div className='pic'>
        <img className={unblur ? 'blur' : 'unblur'} src={image} />
        <h1 className={unblurSolution ? 'solution' : ''}>{name}</h1>
      </div>
    </div>
  )
}
英文:

I wanna switch between two classnames in one element in react by clicking a button. When I click the "Solution" button, the classname of the h1 changes from "solution" to "", but the classname of "blur" stays. My goal is that the classname of "blur" changes to "unblur" when clicking the "Solution" button.

import React from &#39;react&#39;
import {useState, useEffect} from &quot;react&quot;;
import &quot;./Celeb.css&quot;
import images from &quot;../Index.json&quot;


function Celeb() {
  const [image, setImage] = useState();
  const [name, setName] = useState();
  const [unblur, setUnblur] = useState(true);
  const [unblurSolution, setUnblurSolution] = useState(true);
  const [imageList, setImageList] = useState(images);
  ...

  return (
    &lt;div className=&#39;celeb&#39;&gt;
      &lt;div className=&#39;celeb_buttons&#39;&gt;
        &lt;button className=&#39;play_button&#39; onClick={handleNext}&gt;Next&lt;/button&gt;
        &lt;button className=&#39;play_button&#39; onClick={()=&gt; setUnblur(!unblur)}&gt;Start&lt;/button&gt;
        &lt;button className=&#39;play_button&#39; onClick={()=&gt; setUnblurSolution(!unblurSolution)}&gt;Solution&lt;/button&gt;
      &lt;/div&gt;
      &lt;div className=&#39;pic&#39;&gt;
        &lt;img className={unblur ? &quot;blur&quot; : &quot;unblur&quot;} {...unblurSolution ? &quot;solution&quot; : &quot;unblur&quot;} src={image} /&gt;
       &lt;h1 className={unblurSolution ? &quot;solution&quot; : &quot;&quot;}&gt;{name}&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}

答案1

得分: 1

这个语法不太合理:

className={unblur ? "blur" : "unblur"} {...unblurSolution ? "solution" : "unblur"}

第二个代码块与第一个完全无关,与className属性无关。 (为什么要使用扩展语法?此代码中的同一逻辑的其他实例都没有使用它...)如果要切换多个className值,则该逻辑应该在同一代码块中。

请考虑,多个className值最终组成一个字符串。因此,您实际上是动态构建字符串的一部分。将这些部分合并为一个较大的字符串。例如:

className={`${unblur ? "blur" : "unblur"} ${unblurSolution ? "solution" : "unblur"}`}

当然,请注意,如果unblurunblurSolution都为false,那么您将两次使用"unblur"类。这可能不太可能引发问题。但如果不希望这样,那么您可以重构您的逻辑以适应所需的任何内容。

随着内联逻辑变得更加复杂,您始终可以将其移到渲染之前,并定义要在渲染中使用的变量。例如:

let imgClass = '';
if (unblur)
  imgClass += ' blur';
if (unblurSolution)
  imgClass += ' solution';
if (imgClass.length === 0)
  imgClass = 'unblur';

// 然后,在JSX中...
className={imgClass}

可能有多种定义最终所需的className值的方法。总体要点是将生成的值分配给该元素的className属性,而不仅仅是在属性之后的另一个代码块中。

英文:

This syntax doesn't make much sense:

className={unblur ? &quot;blur&quot; : &quot;unblur&quot;} {...unblurSolution ? &quot;solution&quot; : &quot;unblur&quot;}

The second code block is entirely disconnected from the first and has nothing to do with the className attribute. (And why is the spread syntax even being used? None of the other instances of this same logic in this same code use it...) If you're toggling multiple className values, that logic needs to be in the same code block.

Consider that multiple className values ultimately form a string. So you're essentially dynamically building parts of a string. Combine those parts into one larger string. For example:

className={`${unblur ? &quot;blur&quot; : &quot;unblur&quot;} ${unblurSolution ? &quot;solution&quot; : &quot;unblur&quot;}`}

Note of course that if both unblur and unblurSolution are false then you'll be using the &quot;unblur&quot; class twice. This is unlikely to cause a problem though. But if it's not desired then you can refactor your logic to whatever is desired.

As the inline logic gets more complex, you can always move it to before the render and define variables to be used within the render. For example:

let imgClass = &#39;&#39;;
if (unblur)
  imgClass += &#39; blur&#39;;
if (unblurSolution)
  imgClass += &#39; solution&#39;;
if (imgClass.length === 0)
  imgClass = &#39;unblur&#39;;

// and later, in the JSX...
className={imgClass}

There are probably a variety of ways to define your logic for whatever className value you ultimately want. The overall point is that the resulting value needs to be assigned to the className attribute on that element, not just in another code block after the attribute.

答案2

得分: 0

为什么在这里试图销毁布尔值?

因为这样,该值将不会被读取为布尔值,并使用引号中的类名逻辑。

英文:

Why are u trying to destructor the boolean value here?

Switching between multiple classnames in one element
在一个元素中切换多个类名

Because of this, the value will not read as boolean
and use the logic of class name in the quotes

huangapple
  • 本文由 发表于 2023年6月8日 19:29:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76431401.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定