如何为react原生样式中的动态值设置属性

import React, { useState } from 'react';

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(!isActive);
  };

  const className = isActive ? 'active' : '';

  return (
    <div className={className} onClick={handleClick}>
      My Component
    </div>
  );
}

import React, { useState } from 'react';

function MyComponent() {
  const [color, setColor] = useState('red');

  const handleClick = () => {
    setColor(color === 'red' ? 'blue' : 'red');
  };

  const style = {
    color: color,
    fontSize: '16px',
    fontWeight: 'bold',
  };

  return (
    <div style={style} onClick={handleClick}>
      My Component
    </div>
  );
}

import React, { useState } from 'react';

function ChildComponent(props) {
  return <div style={{ color: props.color }}>{props.text}</div>;
}

function ParentComponent() {
  const [color, setColor] = useState('red');

  const handleClick = () => {
    setColor(color === 'red' ? 'blue' : 'red');
  };

  return (
    <div onClick={handleClick}>
      <ChildComponent color={color} text="Child Component" />
    </div>
  );
}