React - 动态和类名

Question

演示

我从和数组中添加文本元素，我喜欢遍历元素并更新claas名称。

我正在选择具有当前类名的元素，并且我还想添加新的类名。

是否可以添加新的类名，例如

element.className={'selected'} 

=

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {

  const colors = [
    'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
  ]

  const loopFun = () => {
    for(let i=0; i<colors.length; i++){
      const element = document.getElementsByClassName('test-'+i)
      //element.className={'selected'} 
    }
  }

  return (
    <div className='titles'>
      {colors.map((color, i) => (
        <p key={i} className={'title-'+i}>{color}</p>
      ))}

      {loopFun()}

    </div>
  );
}

render(<App />, document.getElementById('root'));   

Answer 1

const element = document.getElementsByClassName('test-'+i)

这不应该是：

const element = document.getElementsByClassName('title-'+i)[0]

然后只需添加：

element.classList.add('selected')

然而，在反应中直接操作 dom 元素被认为是不好的做法。您应该使用useRef钩子对虚拟 dom 进行操作。

• 使用参考文档

编辑：

element.classList.add('selected')

• 关于 react 组件如何渲染的文档