logo标签列表

如何在react-bootstrap组件中添加自定义data-*属性

reactjsreact-bootstrapcustom-data-attribute
4
我在我的React应用程序中使用react-bootstrap作为“原子”级组件，并且我想将HTML5数据-*属性传递给这些组件。即使我确实在我的React-Bootstrap组件（在我的情况下是Button）中传递它们，它们也不会显示出来，当我检查它们时，因此我无法使用它们。现在有没有办法做到这一点？我已经阅读了他们的文档，但没有线索如何做到这一点？
你解决了这个问题吗？ - Joel Peltonen
@Nenotlep：嗯，其实不是这样的！我想要保留的额外信息，我将其附加在自定义属性中的id属性中。 - HVenom
@HVenom，你使用的是哪个版本的react-bootstrap？因为我在最新的代码中看到他们将其余的props传递给了组件，所以它对大多数组件都有效。 - Shubham Khatri
@ShubhamKhatri 嗯！很奇怪，在我发布这个问题的时候，我使用的是（0.32.0），并且在将数据属性传递给按钮时遇到了问题。今天我尝试了同样的事情，它像魔法一样运行https://codesandbox.io/s/7m34vvljjq - HVenom
是的，我现在也发现了。也许可以接受adamnrights的答案，或者@ShubhamKhatri应该添加他们自己的答案？ - Joel Peltonen
1个回答
5

在React中，使用data-*的DOM属性不会被改变。

自React 16起，非数据属性有更严格的规定，但正如您可以在这里所读到的，数据属性仍然保留。

在React Bootstrap中，如果某些元素映射到例如

  • 项目列表，则可能会遇到接收数据属性的问题。如果您显示JSX，则可能会更容易诊断。

    • 哦，这其实是真的。如果您在这里添加JSX和渲染后的HTML示例会很酷，但+1也可以。 - Joel Peltonen
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接