Question

我正在尝试根据该元素是否处于状态来更改按钮的外观。这是一个多选选择。因此调用了setAnswer，它调用addAnswer。然后，我想根据元素是否处于状态来设置className，但是我没有得到它。

{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

您可以有条件地设置这样的课程

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

Answer 2

clsx是此的最佳选择。您可以有条件地设置一个或多个在条件为真时使用的className。

这是我制作的一个真实的代码段，也可以在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的更多信息，请参见此处的示例Understanding usage of clsx in React

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

const getClassName = ()=> { 

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

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

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

2 个答案: