HTML自定义属性未显示？

如何解决HTML自定义属性未显示？

使用React应用，我目前正在将自定义属性添加到HTML标签或React组件以进行E2E测试（testcafe）

我不确定为什么我在检查页面时没有在任何元素中显示额外的 data-test =“ burger-menu-btn” 吗？

 import {slide as Menu} from 'react-burger-menu';
 ...

 <Menu className="sidebar-menu" isOpen={menuOpen} data-test="burger-menu-btn">
        <Nav.Link onClick={() => goTo("/dashboard")}>
        ...
 </Menu>

常规HTML标签（例如

）也是如此

<button className={"redirect-button"} data-test="return-dashboard-btn">Return</button>

因此，testcafe无法通过await Selector('[data-test="return-dashboard-btn"]');找到按钮

通过webpack-dev-server或webpack捆绑包提供该应用程序

我不认为webpack会删除任何HTML属性，不确定为什么它们会消失。

解决方法

通常，当您使用组件时，自定义属性可能不会出现，因为它们是道具，并且可能未在组件中使用。在您的情况下，<Menu ...>是组件，通常，您传递的属性是它的道具。您需要打开菜单，然后查看是否可以对其进行修改。考虑到它是组件的一部分，我不建议这样做。

据我所知，Menu不接受自定义属性。您需要自己制作一个可以自定义道具的道具。最好的事情是，复制Menu.js并将其命名为MenuExtended，然后将自定义属性作为组件的属性。

,

因此，在react-burger-menu的<Menu/>组件中，没有自定义道具，正如您在其存储库中看到的there一样。尝试创建自己的组件或使用<button>