Javascript 单击：Reactjs时如何更改字符串部分的样式

单击时，我将更改部分字符串的样式。示例文本然后单击T，之后它将从黑色更改为红色，只是T而已 在我的代码中，我拆分文本并在单击文本时保持拆分数组，它将调用handleClick函数并发送我单击的字符索引为参数。例如，当我单击E时，它将发送0作为handleClick函数的参数

import React,{Component} from 'react'
export default class Test extends Component {
    handleClick = (index) => {
        console.log(index)
    }
    render() {
        return(
            <div>
                {this.state.table.map((text) => {{this.state.split 
                    && this.state.split.map((item, index) => { 
                        return(
                            <span key={index} onClick={() => 
                                this.handleClick(index)}>{item} 
                            </span>
                         );
                })}
            </div>
        )
    }
 }

---

您需要一个状态来维护单击的索引。然后在呈现分割跨度时使用该索引来设置不同颜色的类名。 然后你可以将你的风格应用到这个类中

export default class Test extends Component {

    handleClick = (index) => {
        this.setState({ clickedIndex: index });
    }
    render() {
        return (
            <div>
                {this.state.table.map((text) => {
                    this.state.split && this.state.split.map((item, index) => {
                        return (
                            <span key={index} style={clickedIndex === index ? {color: 'red'} : {}} onClick={() =>
                                this.handleClick(index)}>{item}
                            </span>
                        );
                    })
                })}
            </div>
        )
    }
}