Los desarrolladores me dan los encabezados de la tabla:
const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> return <Table headers={headers} /> } Y este es el código del componente Table :
const Table = ({headers}) => { var clonedHeaders = React.Children .toArray(headers.props.children) .map(header => React.cloneElement(header, { className: "text-gray-900 py-3 font-light text-xs" })); return <table> <thead> <tr> {clonedHeaders} </tr> </thead> </table> } Puedo usar React.cloneElement para agregar atributos a los elementos que recibo como accesorios de mi componente.
Sin embargo, también quiero poder cambiar el contenido del texto de los elementos recibidos.
Por ejemplo, quiero llamar a mi función de traducción local en los elementos del encabezado de la tabla, automáticamente . En este momento, si los desarrolladores quieren que sus tablas sean multilingües, deberían escribir esto:
var headers = <> <th>{t('Name')}</th> <th>{t('Age')}</th> <th>{t('Other text')}</th> </> Quiero centralizar esa función t(text) para todos los headers . ¿Puedo hacer eso?
Puede usar la misma técnica en los elementos secundarios de los encabezados que en los encabezados mismos:
const clonedHeaders = React.Children .toArray(headers.props.children) .map(header => React.cloneElement(header, { className: "text-gray-900 py-3 font-light text-xs", children: React.Children.toArray(header.props.children).map(child => { return typeof child === "string" ? t(child) : child; }) }));Ejemplo en vivo:
const {useState} = React; function t(english) { // Just so we can see that it happens return english.toLocaleUpperCase(); } const CustomersTable = () => { var headers=<React.Fragment> <th>Name</th> <th>Age</th> <th>Another text</th> </React.Fragment>; return <Table headers={headers} />; }; const Table = ({headers}) => { const clonedHeaders = React.Children .toArray(headers.props.children) .map(header => React.cloneElement(header, { className: "text-gray-900 py-3 font-light text-xs", children: React.Children.toArray(header.props.children).map(child => { return typeof child === "string" ? t(child) : child; }) })); return <table> <thead> <tr> {clonedHeaders} </tr> </thead> </table>; }; ReactDOM.render(<CustomersTable />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> Ese ejemplo no hace ninguna recursión, por lo que no manejará <th><span className="something">Name</span></th> . Si desea manejar eso, tendrá que escribir una función recursiva para manejarlo, pero será en la misma línea.