如何从props中破坏`data-*`(连字符)属性？

Question

我试图将我的一个组件转换为功能无状态组件(FSC).

但是如果使用FSC将不会被优化...rest,因此我需要破坏组件道具.

我把Link称为

<Link to={link} data-navbar-click="close-menu">{name}</Link>

然后在链接我想破坏连字符>数据导航栏点击道具:

function Link({ to, className, onClick, target, rel, key, data-navbar-click}) {

然而,这不编译.所以我试过:

function Link({ to, className, onClick, target, rel, key, ['data-navbar-click']}) {

但这也不起作用.

Answer 1

最简单的解决方案：使用别名。

const Link = ({
  to,
  className,
  onClick,
  target,
  rel,
  key,
  'data-navbar-click': dataNavbarClick,
}) => {
  const test = dataNavbarClick;
};

dataNavbarClick的值应为“ close-menu”