React中动态添加数组元素后dragImg类未生效的解决方法咨询

嗨，这个问题其实是React JSX语法里一个很容易踩的小坑！

你代码里的核心问题是在JSX中使用了class来设置类名——但在React的JSX语法规则里，class是JavaScript的保留关键字，不能直接用来作为元素属性，React要求我们用className来替代它。只有用className，React在编译JSX的时候才会正确把它转换成DOM元素的class属性。

你说预定义元素有这个类，可能是这些元素之前是通过非JSX的方式渲染的？但不管怎样，把class改成className就能解决所有元素（包括新增的）都不带类的问题。

修改后的代码示例 #

首先是渲染部分的代码，注意两个关键改动：把class换成className，同时给列表项加上key属性（React要求列表渲染必须加key，避免渲染警告）：

<div> 
  {this.state.texts.map((text, index) => ( 
    <div key={index} className="dragImg">{text}</div> 
  ))} 
</div>
<input ref={(textInput) => {this.textInput = textInput}} type="text"></input>
<button onClick={this.clickButton.bind(this)}>Add Text</button>

然后可以优化一下你的clickButton函数，让它更健壮：

clickButton(){
  const inputValue = this.textInput.value.trim();
  // 避免添加空内容
  if (!inputValue) return;
  
  // 用函数式setState，确保依赖前一次state的更新是正确的（因为setState是异步的）
  this.setState(prevState => ({
    texts: prevState.texts.concat(inputValue)
  }));
  
  // 添加完成后清空输入框，提升用户体验
  this.textInput.value = '';
}

为什么这样改有效？ #

1. className替代class：这是React JSX的语法要求，只有这样，React才能正确把类名绑定到DOM元素上，不管是初始渲染的元素还是后续新增的元素，都会带上dragImg类，这样所有元素都能支持拖拽功能了。
2. 添加key属性：React需要用key来识别列表中的每个元素，确保更新时的性能和正确性，避免控制台出现警告。
3. 优化clickButton函数：加入空值判断防止添加空文本，用函数式setState避免异步更新导致的state错误，最后清空输入框让用户体验更好。

内容的提问来源于stack exchange，提问作者Ninini