Reactjs 如何从道具中销毁`data-*`（连字符大小写）属性？

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

但是如果使用

…rest

，FSC将不会得到优化，因此我需要销毁组件道具

我称链接为

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

然而，这并不能编译。所以我试着：

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

---

但是这也不行。

您可以编写一个实用函数，将

camelCase

键名转换为kebab/hyphen-case属性，从props对象中选择它们，并使用JSX spread在组件中渲染它们

示例如下：

import kebabCase from 'lodash/kebabCase';

const props = {
  dataNavAttr: 'close-menu',
  itemCount: 100
}

const pickAndTransformDataProps = (props, findByKey) => {
  const pickedProps = {};
  Object.keys(props).map(key => {
    if (key.includes(findByKey)){
      pickedProps[kebabCase(key)] = props[key];
    }
  });
  return pickedProps;
}

const pickedDataProps = pickAndTransformDataProps(props, 'data');
console.log({ pickedDataProps }); 
// Using JSX spread: <Component onClick={props.onClick} { ...pickedDataProps } />

从“lodash/kebabCase”导入烤肉串；
常量道具={
dataNavAttr:“关闭菜单”，
物品计数：100
}
常量pickAndTransformDataProps=（props，findByKey）=>{
const pickedProps={}；
Object.keys（props.map）（key=>{
if（键包括（findByKey））{
pickedProps[kebabCase（key）]=道具[key]；
}
});
返回拾取的道具；
}
const pickedDataProps=pickAndTransformDataProps（props，“data”）；
log（{pickedDataProps}）；
//使用JSX排列：

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

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

---

dataNavbarClick应该有“close menu”（关闭菜单）的值。

我希望它不使用外部库。我注意到我可以这样做：function

Link（props）{const-dataNavbarClick=props['data-navbar-click']；

然后执行常规的

const{to，className，onClick，target，rel，key}=props}

。。奇怪的是，虽然我不能很好地销毁它，但是把一个额外的对象传递给只包含属性props数据的props怎么样？比如

constdataattrprops={'datalink'smth'，'etc'：'etc'}dataAttrProps

，就像

{…props.dataAttrProps}

。对我来说，这似乎是最干净的方法。你说它不会被优化是什么意思，有链接吗？

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