根据 React 功能组件中的状态变量有条件地设置 className

Question

我正在尝试根据该元素是否存在于状态中来更改按钮的外观。这是一个多选选择。所以 setAnswer 被调用，它调用 addAnswer。然后我想根据元素是否处于状态来设置类名，但我就是不明白。

{question.values.map(answer => {
        return  <button className="buttons" key={answer} onClick={() => addAnswer(answer)}>
        {answer}</button>
})}

const addAnswer = (answer) => {
        let indexAnswer = answers.indexOf(answer)
        if (indexAnswer > -1) {
            setAnswer((answers) => answers.filter((a) => { 
                return a != answer }))}

        else setAnswer([...answers, answer])
    };

Answer 1

clsx 是这方面的完美人选。您可以有条件地设置一个或多个 class名称，如果条件为真，这些名称就会被使用。

这是我制作的真实工作片段，也可在此处获得 https://codesandbox.io/s/gracious-sound-2d5fr?file=/src/App.js

import React from "react";
import "./styles.css";
import clsx from "clsx";

import { createUseStyles } from "react-jss";

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const useStyles = createUseStyles({
  answer1: { color: "red" },
  answer2: { color: "green" },
  answer3: { color: "yellow" }
});

export default function App() {
  const classes = useStyles();

  const questions = {
    values: [
      { type: 1, value: "aaaa" },
      { type: 2, value: "bbbb" },
      { type: 3, value: "cccc" },
      { type: 1, value: "dddd" },
      { type: 2, value: "eeee" },
      { type: 3, value: "ffff" }
    ]
  };

  return (
    <div className="App">
      {questions.values.map(answer => (
        <p>
          <button
            className={clsx(classes.always, {
              [classes.answer1]: answer.type === 1,
              [classes.answer2]: answer.type === 2,
              [classes.answer3]: answer.type === 3
            })}
          >
            {answer.value}
          </button>
        </p>
      ))}
    </div>
  );
}

有关 clsx 的更多信息，请参阅此处的示例

或者您可以通过逻辑确定 class 名称并将其设置在这样的变量中

const getClassName = ()=> { 

  switch(answer) {
    case(1): return "class1"
    case(2): return "class2"
    ...
  }
   
}

render(
  /// within the map function
  <   className={getClassName()}  />
)

Answer 2

您可以像这样有条件地设置 class

{question.values.map(answer => {
        return (<button 
                 className={answers.indexOf(answer) === -1 ? 'class1' : 'class2'} 
                 key={answer} 
                 onClick={() => addAnswer(answer)}
               >
                 {answer}
              </button> );
})}

根据 React 功能组件中的状态变量有条件地设置 className

Conditionally setting className based on a state variable in a React functional component

javascript

classname

reactjs

react-hooks

use-state