HTML 自定义属性未显示？

Question

使用 React 应用程序，我目前正在将自定义属性添加到 HTML 标签或用于端到端测试的 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"]');

的按钮

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

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

Answer 1

所以在 react-burger-menu 中，在 <Menu/> 组件中，没有自定义道具，您可以在他们的存储库中看到 here。尝试创建自己的组件或使用 <button>

Answer 2

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

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

HTML 自定义属性未显示？

HTML custom attribute not showing?

javascript

html

reactjs

testing

testcafe