关于React动态修改元素样式的三种方式

方式一：使用内联样式

React提供了内联样式的方法，可以通过定义一个包含样式属性的JavaScript对象，然后将其作为元素的style属性值。

示例1：使用内联样式修改元素背景颜色

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor: 'green',
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      backgroundColor: prevState.backgroundColor === 'green' ? 'red' : 'green',
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Change Color</button>
        <div
          style={{
            backgroundColor: this.state.backgroundColor,
            width: '200px',
            height: '200px',
          }}
        ></div>
      </div>
    );
  }
}

export default MyComponent;

方式二：使用CSS类名

除了内联样式，我们还可以通过添加或删除CSS类来修改元素样式。在React中，这可以通过条件渲染来实现。

示例2：使用CSS类名修改元素样式

import React from 'react';
import './MyComponent.css'; // 引入CSS样式

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHighlighted: false,
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      isHighlighted: !prevState.isHighlighted,
    }));
  };

  render() {
    const buttonClass = this.state.isHighlighted ? 'highlighted' : 'normal';

    return (
      <div>
        <button onClick={this.handleClick}>Toggle Highlight</button>
        <div className={buttonClass}></div>
      </div>
    );
  }
}

export default MyComponent;

方式三：使用CSS-in-JS库

CSS-in-JS库允许将CSS样式与组件代码直接关联起来。在React中，有一些流行的CSS-in-JS库，如styled-components和Emotion。

示例3：使用styled-components修改元素样式

import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  background-color: ${props => (props.isHighlighted ? 'yellow' : 'white')};
  width: 200px;
  height: 200px;
`;

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHighlighted: false,
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      isHighlighted: !prevState.isHighlighted,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Toggle Highlight</button>
        <StyledDiv isHighlighted={this.state.isHighlighted}></StyledDiv>
      </div>
    );
  }
}

export default MyComponent;

以上是React中动态修改元素样式的三种常用方式。你可以根据具体的需求选择适合你的方式来实现动态样式修改。