Estoy tratando de modificar un componente secundario existente dentro de un componente de función.
Digamos que este es el componente de función de Table
original que me gustaría representar en mi propio componente de función de tabla CustomizedTable
. Dado que el componente de la función Table
está bellamente diseñado, no quiero modificar toda la función o estructura. Lo que espero lograr es personalizar y reemplazar el componente del Body
existente
const Table = (props) => { return ( <Context props={props}> <Container className={props.className} style={props.style}> <Header /> <Body ColumnComponents={ColumnData} RowComponents={RowData} /> <Footer /> </Container> </Context> ); });
¿Cómo encuentro y reemplazo el componente <Body/>
con <CustomizedBody>
que está anidado dentro del componente de la función Table
? ¿Hay alguna forma de modificarlo sin tocar el <Body>
existente?
import { Table } from './Table'; const CustomizedBody = (props) => { return ( <Body> // Body Add Ons </Body> )} export const CustomizedTable = (props) => { return ( <Table Body={<CustomizedBody>}> </Table> )}