0
681
ViewsOrganigrama D3 con componentes React personalizados que devuelven objeto Objeto
Estoy creando un organigrama usando React y esta biblioteca: https://github.com/bumbeishvili/org-chart . Utiliza D3 para crear el organigrama.
Quiero usar componentes de React personalizados para diseñar cada nodo en el organigrama, pero cuando trato de configurar el contenido del nodo en un componente de React, devuelve {object Object} en lugar de representar el componente. 
Eche un vistazo a este Stackblitz para reproducir el error: https://stackblitz.com/edit/d3-org-chart-react-integration-hooks-oysugz?file=OrgChart.js
Aquí trato de establecer el contenido del nodo en <TestOrgCard/> pero, como puede ver, no se procesa.
¿Alguien tiene una idea de cómo renderizar tarjetas usando componentes React personalizados?
1 answers
Answer question0
No puede devolver un componente de reacción desde la función que pasa a .nodeContent() , debe ser una cadena HTML. Como desea representar un componente de reacción existente, puede usar ReactDOMServer.renderToStaticMarkup para obtener la cadena HTML equivalente.
import ReactDOMServer from "react-dom/server"; ... const TestOrgCard = (props) => { return ( <div> <h5> {props.name} </h5> </div> ); }; ... .nodeContent((d, i, arr, state) => { return ReactDOMServer.renderToStaticMarkup( <TestOrgCard {...d.data} /> ); })