tengo tres componentes uno dibuja un círculo, uno dibuja una línea y uno es su contenedor. en el contenedor, uso accesorios para dar coordinación a los círculos. Quiero usar esa coordinación (dos cx y dos cy) en mi otro componente para dibujar una línea entre ellos. ¿Hay alguna manera de que pueda pasar la identificación de mis puntos a mi componente de línea y usar sus valores x e y (como obtener atributos en Javascript)? aquí está mi código para una mejor comprensión

componente de punto

 import React from 'react'; const Point = ({ p_cx, p_cy, id }) => { return ( <> <circle cx={`${p_cx}`} cy={`${p_cy}`} r={5} fill='white' id={`${id}`} /> </> ); }; export default Point;

componente de línea

 import React from 'react'; const Line = ({ L_x1, L_y1, L_x2, L_y2, id1 }) => { return ( <> <path d={ 'M' + `${L_x1}` + ' ' + `${L_y1}` + 'L' + `${L_x2}` + ' ' + `${L_y2}` } stroke='green' fill='red' strokeWidth={5} id={`${id1}`} /> </> ); }; export default Line;

envase

 import React from 'react'; import Line from './line'; import Point from './points'; const Pointsdraw = () => { return ( <svg> <g> <Point p_cx={20} p_cy={50} id={'abcd'} /> <Point p_cx={10} p_cy={60} id={'aaa'} /> </g> <g> <Line /> </g> </svg> ); }; export default Pointsdraw;