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>

问题在于该物业是否有点击＆＃39;在强类型的表格中不存在.Cell＆＃39; element（其道具由TableCellProps接口决定），因此代码无法编译。

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

import { Link } from 'react-router'

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

他们在哪里发表评论：

将额外的道具传递给您呈现为的组件。

在这种情况下，＆＃39;到＆＃39; prop不是Menu.Item元素可识别的元素，但是Link元素需要的元素。

Answer 1

问题在于该物业是否有点击＆＃39;并不存在强烈打字＆＃39; Table.Cell＆＃39;元素（其道具由 TableCellProps接口）因此代码无法编译。

您应该使用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元素嵌套。

Answer 3

在您的Table.Row上，您可以设置一个onClick侦听器。

<Table.Row onClick={this.onClick}>
   <Table.Cell>text</Table.Cell>
   <Table.Cell>text</Table.Cell>
   <Table.Cell>text</Table.Cell>
</Table.Row>

从那里，您可以从整行中获取数据。它将用空格分隔行中的数据。

onClick = (e) => {
   console.log(e.currentTarget.innerText)
}

Semantic-ui-react Table.Cell and onClick

3 个答案: