英文:
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 '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"} {...unblurSolution ? "solution" : "unblur"} src={image} />
<h1 className={unblurSolution ? "solution" : ""}>{name}</h1>
</div>
</div>
)
}
答案1
得分: 1
这个语法不太合理:
className={unblur ? "blur" : "unblur"} {...unblurSolution ? "solution" : "unblur"}
第二个代码块与第一个完全无关,与className
属性无关。 (为什么要使用扩展语法?此代码中的同一逻辑的其他实例都没有使用它...)如果要切换多个className
值,则该逻辑应该在同一代码块中。
请考虑,多个className
值最终组成一个字符串。因此,您实际上是动态构建字符串的一部分。将这些部分合并为一个较大的字符串。例如:
className={`${unblur ? "blur" : "unblur"} ${unblurSolution ? "solution" : "unblur"}`}
当然,请注意,如果unblur
和unblurSolution
都为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 ? "blur" : "unblur"} {...unblurSolution ? "solution" : "unblur"}
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 ? "blur" : "unblur"} ${unblurSolution ? "solution" : "unblur"}`}
Note of course that if both unblur
and unblurSolution
are false
then you'll be using the "unblur"
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 = '';
if (unblur)
imgClass += ' blur';
if (unblurSolution)
imgClass += ' solution';
if (imgClass.length === 0)
imgClass = 'unblur';
// 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
为什么在这里试图销毁布尔值?
因为这样,该值将不会被读取为布尔值,并使用引号中的类名逻辑。
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论