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”元素（其属性由 TableCellProps 接口确定）上不存在属性“onClick”，因此无法编译代码。

我的解决方法是将 Table.Cell 元素组合在一个其 props 子类 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 部分的 Semantic-ui-react 文档和菜单/链接示例中给出了应该有方法的提示：

import { Link } from 'react-router'

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

他们在哪里发表评论：

额外的道具被传递给你正在渲染的组件。

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

Answer 1

在发布问题时，我忽略了一个相当简单的解决方案是利用 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 元素嵌套。

Answer 2

问题是属性“onClick”在 强类型的“Table.Cell”元素（其道具由 TableCellProps 接口），所以无法编译代码。

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

<Table.Cell onClick={handleClick} />