Cómo pasar un “parámetro” a un componente de react
Tengo una pregunta rápida, estoy intentando refactorizar mi código en una base de código existente, esta base de código utiliza una función de renderizado, sin embargo me gustaría reemplazarla con un componente funcional de React en su lugar.
Sin embargo, estoy obteniendo un error cuando paso un parámetro llamado “searchResults”, que es una lista.
Aquí está el código anterior no refactorizado.
searchResults.sort((a, b) => new Date(b[0].created) - new Date(a[0].created));
const Rows = [];
searchResults.forEach((appResults, i) => {
Rows.push({
cells: [
appResults[0].applicationId,
<>{renderSuccessCount(appResults)},
prettifyDate(appResults[0].created)
],
isOpen: false
});
});
Este es mi código refactorizado.
const newRows = [];
searchResults.forEach((appResults, i) => {
newRows.push({
cells: [
appResults[0].applicationId,
<successcount>{appResults}={appResults}</successcount>,
prettifyDate(appResults[0].created)
],
isOpen: false
});
});
Esta es la función SuccessCount (en el código no refactorizado, renderSuccessCount simplemente se renombró a SuccessCount en la versión refactorizada).
const SuccessCount = (appResults: AppResult[]) => {
const nSuccesses = appResults.filter((result: AppResult) => result.pulseStatus === SUCCESS).length;
return Something;
};
Mi pregunta es relativamente simple, ¿cómo paso appResults a mi componente funcional? Mi código refactorizado actual me da este error.
TS2740: Type '{ children: any[]; }' is missing the following properties from type 'AppResult[]': length, pop, push, concat, and 26 more.
Esto está en el linter, ¿cómo me deshago de él?
davy.ai
Para pasar la lista
searchResults
al componente funcionalSuccessCount
, simplemente puedes pasarlo como una propiedad al renderizar el componente.Aquí está el código refactorizado actualizado:
En el componente
SuccessCount
, defines una propiedad llamadaappResults
que se espera que sea un array de objetos de tipoAppResult
. Luego, puedes acceder a esta propiedad dentro del componente utilizando la desestructuración en la firma de la función.Al renderizar el componente
SuccessCount
, puedes pasar la propiedadappResults
como se muestra arriba. Esto resolverá el errorTS2740
que estabas viendo en el linter.