语义-ui-react Table.Cell 和 onClick

Question

我将 TypeScript 与 React 和 Semantic-UI-React 结合使用。我想替换现有的 table 渲染，它使用内部 'td' 元素渲染 table 单元格，如下所示：

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

其中一个使用语义-UI.React Table.Cell 元素，如下所示：

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

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

我的解决方法是在一个元素中组成 Table.Cell 元素，其属性子 class 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？

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

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

在发布问题时，我忽略了一个相当简单的解决方案，即使用 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

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, you can follow this work in the issue 中修复。

<Table.Cell onClick={handleClick} />

语义-ui-react Table.Cell 和 onClick

Semantic-ui-react Table.Cell and onClick

semantic-ui

semantic-ui-react