Semantic-ui-react Table.Cell和onClick

Question

我正在使用带有React和Semantic-UI-React的TypeScript。我想替换使用内部'td'元素呈现表格单元格的现有表格渲染，如下所示：

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

使用Semantic-UI.React Table.Cell元素，如下所示：

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

问题是强类型的'Table.Cell'元素（其props由TableCellProps接口确定）上不存在属性'onClick'，因此无法编译代码。

我的解决方法是在一个元素中组合Table.Cell元素，其子类类TableCellProps如下：

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

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

然后将单元格渲染为：

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

但这会导致更深层次的嵌套React结构（尽管最终的HTML渲染看起来还不错）。

我的问题是：在使用TypeScript时，使用Semantic-UI-React是否有更惯用的方法？

在Augmentation和Menu / Link示例部分的Semantic-ui-react文档中给出了应该有一种方法的提示：

import { Link } from 'react-router'

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

他们在哪里发表评论：

额外的道具将传递给您渲染的组件。

在这种情况下，'to'prop不是Menu.Item元素可识别的元素，而是Link元素需要的元素。

Answer 1

问题是强类型的'Table.Cell'元素（其props由TableCellProps接口确定）上不存在属性'onClick'，因此无法编译代码。

你应该使用Table.Cell，它是在0.64.4修复的，你可以在issue中关注这项工作。

<Table.Cell onClick={handleClick} />

Answer 2

在发布问题时，我忽略了一个相当简单的解决方案是利用TypeScript扩展运算符从强类型接口添加道具，如下所示：

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

然后从render（）内部：

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

这实现了目标，没有额外级别的React元素嵌套。