2

我将 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 接口确定）上不存在属性“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 执行此操作？

Semantic-ui-react 文档中的增强部分和菜单/链接示例中给出了应该有一种方法的提示：

import { Link } from 'react-router'

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

他们在哪里发表评论：

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

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

4

2 回答 2

4

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

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

<Table.Cell onClick={handleClick} />

于 2017-02-07T09:34:27.657 回答
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 元素嵌套的情况下实现了目标。

于 2017-01-17T14:18:15.013 回答