如何根据React和JS中的内容更改文本的颜色

import React from 'react';

class TextColorChanger extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'black' // 默认颜色为黑色
    };
  }
  
  render() {
    return (
      <div>
        <p style={{ color: this.state.color }}>Hello, World!</p>
      </div>
    );
  }
}

class TextColorChanger extends React.Component {
  // ...

  handleClick = () => {
    this.setState({ color: 'red' }); // 点击按钮后将文本颜色更改为红色
  }

  render() {
    return (
      <div>
        <p style={{ color: this.state.color }}>Hello, World!</p>
        <button onClick={this.handleClick}>Change Color</button>
      </div>
    );
  }
}

ReactDOM.render(<TextColorChanger />, document.getElementById('root'));