J'utilise TypeScript avec React et Semantic-UI-React. Je voudrais remplacer un rendu de tableau existant qui rend les cellules de tableau en utilisant des éléments intrinsèques 'td', comme ceci:

<td className={cssClass} key={idx} onClick={handleClick}>{txt}</td>

Avec celui qui utilise les éléments Semantic-UI.React Table.Cell, comme ceci:

<Table.Cell className={cssClass} key={idx} onClick={handleClick}>{txt}</Table.Cell>

Le problème est que la propriété 'onClick' n'existe pas sur l'élément fortement typé 'Table.Cell' (dont les accessoires sont déterminés par l'interface TableCellProps) et donc le code ne peut pas être compilé.

Ma solution de contournement consiste à composer l'élément Table.Cell dans un élément dont la sous-classe d'accessoires TableCellProps comme ceci:

interface MyTableCellProps extends TableCellProps {
    onClick?: React.EventHandler<React.MouseEvent<any>>;
}

const MyTableCell: React.SFC<MyTableCellProps> = (props) => <Table.Cell {...props} />;

Puis restituer une cellule comme:

<MyTableCell className={cssClass} key={idx} onClick={handleClick}>{txt}</MyTableCell>

Mais cela se traduit par une structure React plus profondément imbriquée (bien que le rendu HTML final semble correct).

Mes questions sont les suivantes: existe-t-il une manière plus idiomatique de faire cela avec Semantic-UI-React lors de l'utilisation de TypeScript?

Une indication qu'il devrait y avoir un moyen est donnée dans la documentation Semantic-ui-react dans la section sur Augmentation et l'exemple de menu / lien:

import { Link } from 'react-router'

<Menu>
  <Menu.Item as={Link} to='/home'>
    Home
  </Menu.Item>
</Menu>

Où ils font le commentaire que:

Les accessoires supplémentaires sont transmis au composant sous lequel vous effectuez le rendu.

Et dans ce cas, le prop 'to' n'est pas celui qui serait reconnu par l'élément Menu.Item, mais c'est celui dont l'élément Link aurait besoin.

2
vextasy 17 janv. 2017 à 16:10

2 réponses

Meilleure réponse

Le problème est que la propriété 'onClick' n'existe pas sur l'élément fortement typé 'Table.Cell' (dont les accessoires sont déterminés par l'interface TableCellProps) et donc le code ne peut pas être compilé.

Vous devriez utiliser Table.Cell, cela a été corrigé dans 0.64.4, vous pouvez suivre ce travail dans le issue.

<Table.Cell onClick={handleClick} />

4
Oleksandr Fediashov 7 févr. 2017 à 09:34

En postant la question, une solution que j'avais négligée et qui est considérablement plus simple consiste à utiliser l'opérateur de propagation TypeScript pour ajouter des accessoires à partir d'une interface fortement typée comme celle-ci:

interface ExtraTableCellProps {
    onClick?: React.EventHandler<React.MouseEvent<any>>;
}

Puis de l'intérieur render ():

var myProps: ExtraTableCellProps = {
    onClick: handleClick
};
return <Table.Cell className={cssClass} key={idx} {...myProps}>{txt}</Table.Cell>;

Cela permet d'atteindre l'objectif sans un niveau supplémentaire d'imbrication des éléments React.

1
vextasy 17 janv. 2017 à 14:18