如何解决语义UI表中的可点击行返回错误
在创建表时使用了Semantic UI's Table。看起来不错,但我希望所有行都可单击,并且单击它们时将其重定向到链接中的页面,所以我添加了Link from react-router-dom。
现在确实可以单击行了,但是在控制台中我收到一些错误消息:
index.js:1 Warning: validateDOMNesting(...): <td> cannot appear as a child of <a>.
in td (created by TableCell)
in TableCell (at GenericTable.js:193)
in a (created by LinkAnchor)
in LinkAnchor (created by Context.Consumer)
in Link (created by TableRow)
in TableRow (at GenericTable.js:143)
in tbody (created by TableBody)
in TableBody (at GenericTable.js:141)
in table (created by Table)
in Table (at GenericTable.js:105)
这是代码:
import React from 'react';
import { Table } from 'semantic-ui-react';
import { Link } from 'react-router-dom'; // used for Link
export default class GenericTable extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
const {
headers,emptyFirstHeader,rows,id,entityName,idList,} = this.props;
return (
<Table id={id}>
<Table.Header>
<Table.Row>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{rows.map((row,rowIndex) => (
<Table.Row
key={idList && idList[rowIndex]}
as={Link} // this line makes the row clickable but also adds the errors
to={entityName && `/${entityName}/${idList[rows.indexOf(row)]}`}> // the location of the redirect
{row.cells.map((cell,cellIndex) => {
if (cell === undefined) {
return null;
}
return (
<Table.Cell
key={idList && `${idList[rowIndex]} ${headers[cellIndex]}`}>
{cell}
</Table.Cell>
);
})}
</Table.Row>
))}
</Table.Body>
</Table>
);
}
}
我注意到它还会影响某些CSS类,当出现此错误时,这些类不会被考虑在内。如果对行as={Link}
进行了注释,则CSS可以再次正常运行,但是行不再可单击。
关于如何消除该错误的任何建议?
解决方法
您需要在行中添加onclick函数以进行导航。像这样的东西。
constructor(props) {
super(props);
}
navigateTo(path) {
// navigate to path
}
...
<Table.Row onClick={()=>{this.navigateTo(`where to to`)}}>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。