带有 React 钩子的动态类名没有按预期工作

Question

This is the code for a custom MultiSelect component I'm writing. I want each button to have class="selected" when that value is selected.

import React from 'react'

import './styles.scss'

export default function MultiSelect({
  name = '',
  options = [],
  onChange = () => {},
}) {
  const clickOption = e => {
    e.preventDefault()
    onChange(
      options.map(o => {
        if (o.value === e.target.value) o.selected = !o.selected
        return o
      }),
    )
  }

  return (
    <div className="multiselect" name={name}>
      {options.map(option => (
        <button
          key={option.value}
          value={option.value}
          onClick={e => clickOption(e)}

          {/* here */}
          className={option.selected ? 'selected' : ''}
        >
          {option.name}
        </button>
      ))}
    </div>
  )
}

The class name never displays as selected , and doesn't change when option.selected changes. When I add {option.selected? 'selected': ''} {option.selected? 'selected': ''} under {option.name} inside the button as raw text, it displays and changes as expected.

When I change it to either of the following, it works:

<button className={`${option.selected ? 'selected' : ''}`}>
<!-- OR -->
<button className={'' + (option.selected ? 'selected' : '')}>

Can anybody explain why plain old className={option.selected? 'selected': ''} className={option.selected? 'selected': ''} isn't working?

Answer 1

I'm going to analyze your solution.

1. className={option.selected? 'selected': ''} className={option.selected? 'selected': ''} could be rewrite to className={option.selected && 'selected' } if the property is defined the operation result will be 'selected' for operator precedence, javascript always evaluate from left to right.
2. MultiSelect is a stateless component so your options props come from the hight order component, one way is an onClick event send as a parameter the id of the option, and in the parent change the value of the option.

import React, { useState } from 'react';
import './styles.scss';

const MultiSelect = ({
    name = '',
    options = [],
    onChange = () => {},
}) => {
    const handleClick = (id) => () => onChange(id);
    return (
        <div className="multiselect" name={name}>
            {options.map((option) => (
                <button
                    key={option.value}
                    value={option.value}
                    onClick={handleClick(option.id)}
                    className={option.selected && 'selected'}
                >
                    {option.name}
                </button>
            ))}
        </div>
    );
};

const Parent = ({ }) => {
    const [options, setOptions] = useState([{
        id: 1,
        value: 1,
        selected: true,
        name: 'Hello',
    },
    {
        id: 2,
        value: 2,
        selected: false,
        name: 'World',
    },
    ]);

    const handleChange = (id) => {
        const option = options.find((option) => option.id === id);
        setOptions(
            ...options.filter((option) => option.id !== id),
            {
                ...option,
                selected: !option.selected,
            },
        );
    };

    return <MultiSelect options={options} onChange={handleChange} name="Example" />;
};