react中的DOM元素属性

React中的DOM元素属性

访问修改元素属性

1. 最近在开发的时候，打算在点击事件中获取到元素之后更改该元素的属性列表，然后发现react给我报错了，报错的原因是"HTMLElement 上面不存在属性classList"
2. 后面改成这样了

const target = e.target as HTMLDivElement

console.log(target.classList)

3. 不止是这个，其余的还有元素img等等，也都是这样的，我想修改img的src给它搞一个照片上去，得这样

const img = currentTarget.querySelector('img') as HTMLImageElement

console.log(img.getAttribute('data-name'))

自定义元素属性

1. react中允许自定义元素属性的，也是允许获取的，但是不能直接获取或者修改
2. react中对自定义属性的要求是：data-xxx，其中data-是必须的，xxx最好是全小写的，不然就控制台给你报错
3. 获取自定义元素属性用DOM.getAttribute(‘data-xxx’)
4. 修改自定义元素属性用DOM.setAttribute(‘data-xxx’, ‘xxxx’)

console.log(img.getAttribute('data-name'))

<img src={value.thumbUrl} data-name={value.name} />