如何在React中将坐标数据从一个类传递到另一个类

import React, { useState } from 'react';

const ParentComponent = () => {
  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });

  return (
    <div>
      <ChildComponent coordinates={coordinates} />
    </div>
  );
};

export default ParentComponent;

import React from 'react';

const ChildComponent = ({ coordinates }) => {
  return (
    <div>
      <p>X: {coordinates.x}</p>
      <p>Y: {coordinates.y}</p>
    </div>
  );
};

export default ChildComponent;

import React, { useState } from 'react';

const ParentComponent = () => {
  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });

  const updateCoordinates = (newCoordinates) => {
    setCoordinates(newCoordinates);
  };

  return (
    <div>
      <ChildComponent coordinates={coordinates} />
      <button onClick={() => updateCoordinates({ x: 10, y: 20 })}>
        Update Coordinates
      </button>
    </div>
  );
};

export default ParentComponent;