jsx函数组件中获取多个相同class,然后修改样式
时间: 2024-04-30 11:23:31 浏览: 10
可以使用React的`useEffect`和`querySelectorAll`来实现。具体步骤如下:
1. 在函数组件中引入`useEffect`。
```js
import { useEffect } from 'react';
```
2. 在函数组件中定义一个`useEffect`函数,使用`querySelectorAll`获取所有相同class的元素。
```js
useEffect(() => {
const elements = document.querySelectorAll('.your-class-name');
// 对获取到的元素进行操作
}, []);
```
3. 对获取到的元素进行样式修改。
```js
useEffect(() => {
const elements = document.querySelectorAll('.your-class-name');
elements.forEach(element => {
element.style.backgroundColor = 'red'; // 修改背景颜色为红色
});
}, []);
```
完整代码示例:
```jsx
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const elements = document.querySelectorAll('.your-class-name');
elements.forEach(element => {
element.style.backgroundColor = 'red'; // 修改背景颜色为红色
});
}, []);
return (
<div>
<div className="your-class-name">元素1</div>
<div className="your-class-name">元素2</div>
<div className="your-class-name">元素3</div>
</div>
);
}
```