Semantic-ui-react Table.Cell 和 onClick

Question

我将 TypeScript 与 React 和 Semantic-UI-React 结合使用.我想替换现有的表格渲染，它使用固有的“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 接口(interface)确定)上不存在属性“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>

他们发表评论的地方:

Extra props are passed to the component you are rendering as.

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

Answer 1

The problem is that the property 'onClick' doesn't exist on the strongly typed 'Table.Cell' element (whose props are determined by the TableCellProps interface) and so the code can't be compiled.

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

<Table.Cell onClick={handleClick} />