javascript - 根据 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

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

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