web-dev-qa-db-fra.com

composant de cellule personnalisé react-table qui référence plusieurs propriétés de ligne

Je dois implémenter le tri de table par colonne, donc je réécris mon composant de table React à l'aide du composant ReactTable de ReactTable.

L'une des cellules du tableau contient un lien et doit accéder à plusieurs propriétés de ligne. Jusqu'à présent, le code de la colonne de lien ressemble à:

{
    Header: "Name",
    accessor: "name",
    Cell: cellInfo => (
        <Link className="scenarioDetailLink"
              to={cellInfo.row.linkDestination}
              id={cellInfo.row.linkName}>{cellInfo.row.name}</Link>
    )
},

Il en résulte des éléments comme celui-ci: td

L'élément d'ancrage généré n'a pas les propriétés id et href. Qu'est-ce que je fais mal.

8
softweave

Il s'est avéré que je devais utiliser cellInfo.original plutôt que cellInfo.row. Lorsque vous fournissez un rendu Cell, vous devez utiliser cellInfo.original pour accéder à toutes vos données de ligne (surtout si vous ne les affichez pas sous forme de colonnes). Le row n'a que ce qui est affiché dans le tableau.

15
softweave