React:当按钮组件被按下时，使用State更改圆形组件的外观

import React, { useState } from 'react';

const Button = () => {
  const [isPressed, setIsPressed] = useState(false);

  const handlePress = () => {
    setIsPressed(!isPressed);
  };

  return (
    <button onClick={handlePress}>
      {isPressed ? '按钮已按下' : '按钮未按下'}
    </button>
  );
};

const Circle = ({ isPressed }) => {
  const circleStyle = {
    width: '100px',
    height: '100px',
    borderRadius: '50%',
    backgroundColor: isPressed ? 'red' : 'blue',
  };

  return <div style={circleStyle}></div>;
};

const App = () => {
  return (
    <div>
      <Button />
      <Circle />
    </div>
  );
};

export default App;