对reactJS调用实心度函数

import React from 'react';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      solid: true // 实心度状态
    };
  }

  toggleSolid = () => {
    this.setState(prevState => ({
      solid: !prevState.solid // 切换实心度状态
    }));
  };

  render() {
    const { solid } = this.state;
    const iconStyle = {
      backgroundColor: solid ? 'black' : 'transparent', // 实心度样式
      color: 'white',
      padding: '10px'
    };

    return (
      <div>
        <button onClick={this.toggleSolid}>切换实心度</button>
        <i className="material-icons" style={iconStyle}>star</i>
      </div>
    );
  }
}

export default ExampleComponent;

import React from 'react';
import './ExampleComponent.css'; // 导入自定义 CSS

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      solid: true // 实心度状态
    };
  }

  toggleSolid = () => {
    this.setState(prevState => ({
      solid: !prevState.solid // 切换实心度状态
    }));
  };

  render() {
    const { solid } = this.state;
    const iconClassName = solid ? 'solid-icon' : 'transparent-icon'; // 实心度类名

    return (
      <div>
        <button onClick={this.toggleSolid}>切换实心度</button>
        <i className={`material-icons ${iconClassName}`}>star</i>
      </div>
    );
  }
}

export default ExampleComponent;