[英]How to add 'a' link tag with hyperlink in Reactjs app
I have some issue with add hyperlink to custom cell's text. 我在将超链接添加到自定义单元格的文本时遇到了一些问题。 I already add a tag into custom cell but as you see in code sandbox, It seems not working but still 'a' tag is exist inside the div tag.
我已经在自定义单元格中添加了一个标签,但是正如您在代码沙箱中看到的那样,它似乎无法正常工作,但div标签中仍然存在“ a”标签。 How can I solve this problem?
我怎么解决这个问题?
Full Code and demo's are can acccess with codeSandbox 完整的代码和演示可以通过codeSandbox访问
I use React-data-table-component and I followed the right way to add hyperlink but It seems it's not working. 我使用React-data-table-component,并且按照正确的方法添加超链接,但似乎不起作用。 And I don't know why it's not working.
而且我不知道为什么它不起作用。 It said it uses JSX.
它说它使用JSX。
const columns = [
{
name: 'Coin Name',
selector: 'key',
sortable: true,
cell: row => (
<a
href={'https://www.bithumb.com/trade/order/' + row.key}
target="_blank"
rel="noopener noreferrer">
{row.key}
</a>
),
},
}
React Data Table Component
by default has a column property called ignoreRowClick
which is set to default to false
. 默认情况下,
React Data Table Component
具有名为ignoreRowClick
的列属性,该属性默认设置为false
。 This helps in onRowClicked
getting triggered unnecessarly. 这有助于
onRowClicked
被不必要地触发。 If you set ignoreRowClick
to true, your a
tag click will work. 如果设置
ignoreRowClick
为true,您的a
标签点击会工作。
{
name: 'Coin Name',
selector: 'key',
sortable: true,
ignoreRowClick: true,
cell: row => (
<a
href={'https://www.bithumb.com/trade/order/' + row.key}
target="_blank"
rel="noopener noreferrer">
{row.key}
</a>
),
},
The datatable is wrapping your <a/>
tag with div
and some other wrappers. 数据表使用
div
和其他一些包装器包装了<a/>
标签。 When u click on the <a/>
internally the click is not generated on that element but on its parent element (Parent element defines click on the entire row). 当您在内部单击
<a/>
,不会在该元素上生成单击,而是在其父元素上生成(父元素定义对整行的单击)。 If you try this 如果你尝试这个
<a href={"https://www.bithumb.com/trade/order/" + row.key}
target="_blank"
rel="noopener noreferrer"
style={{ position: "absolute" }}>
{row.key}
</a>
It will work but this is not an optimised solution. 它将起作用,但这不是一个优化的解决方案。 If you look into datatables docs you will find a property named
ignoreRowClick
. 如果您查看datatables文档,将会发现一个名为
ignoreRowClick
的属性。 This will prevent the click event of entire row and activate click on specific column cell. 这将防止整个行的单击事件,并激活对特定列单元格的单击。
So the code will be 所以代码将是
{
name: "Coin Name",
selector: "key",
sortable: true,
ignoreRowClick: true, // This is the change
cell: row => (
<a
href={"https://www.bithumb.com/trade/order/" + row.key}
target="_blank"
rel="noopener noreferrer"
style={{ position: "absolute" }}
>
{row.key}
</a>
)
},
Please read Datatables docs for more 请阅读数据表文档以获取更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.