HTML 自定义属性未显示？

Question

使用 React 应用程序，我目前正在将自定义属性添加到 HTML 标签或用于 E2E 测试的 React 组件（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"]');找到按钮await Selector('[data-test="return-dashboard-btn"]');

该应用程序通过 webpack-dev-server 或 webpack bundle 提供服务

我不认为 webpack 删除任何 HTML 属性，不知道为什么它们消失了。

Answer 1

通常，当您使用组件时，自定义属性可能不会出现，因为它们是 props 并且它们可能没有在组件中使用。 在您的情况下， <Menu ...>是组件，通常，您传递的属性是它的道具。 您需要打开菜单，然后查看是否可以修改它。 我不会推荐它，因为它是您组件的一部分。

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

Answer 2

因此，在反应-汉堡菜单，在<Menu/>组件，没有定制的道具，你可以看到这里在他们的仓库。 尝试创建自己的组件或使用<button>