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

Question

我正在尝试将我的一个组件转换为功能性无状态组件 (FSC)。

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

我将链接称为

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

然后在链接中我想破坏连字符> data-navbar-click 属性:

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”