将 className 应用于 React 中的一个标签

Question

如何将 styles 应用于特定标签？ 我启动了 state 并单击我希望将名称应用于 class 名称，但它会同时应用于所有名称。

import { Button, Form, Input } from 'antd'
import React, { useEffect, useState } from 'react'
import classNames from 'classnames/bind'
import styles from './style.module.css'
const cx = classNames.bind(styles)

const TypingInput: React.FC = () => {
  const [typingText, setTypingText] = useState<string>('Enter text here and click "use this template"')
  const [isActive, setIsActive] = useState<boolean>(false)

  const className = cx('word', {
    isActiveWord: isActive
  })

  const check = (word?: string): void => {
    setIsActive((prevState) => !prevState)
  }
  return (
      {typingText && (
        <div className='template'>
          {typingText.split('').map((word, key) => (
            <span key={key} className={className} onClick={() => check(word)}>
              {word}
            </span>
        </div>
   ))})

Answer 1

我决定了这个问题。 需要为 span 做另外一个 state，如下所示：

import { Button, Form, Input } from 'antd'
import React, { useEffect, useState } from 'react'
import classNames from 'classnames/bind'
import styles from './style.module.css'
const cx = classNames.bind(styles)

const CustomSpan = ({ letter }) => {
  const [isActive, setIsActive] = useState<boolean>(false)
  const className = cx('word', {
    isActiveWord: isActive
  })
  const check = (word?: string): void => {
    console.log(word)
    setIsActive((prevState) => !prevState)
  }
  return (
    <span className={className} onClick={() => check(letter)}>
      {letter}
    </span>
  )
}

const TypingInput: React.FC = () => {
  const [typingText, setTypingText] = useState<string>('Enter text here and click "use this template"')
  
  return (
      {typingText && (
        <div className='template'>
          {typingText.split('').map((letter: string, key) => (
            <CustomSpan letter={letter} />
        </div>
   ))})