Question

我试图将我的一个组件转换为功能无状态组件（FSC）。

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

我将Link称为

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

然后在链接中我想破坏连字符＆gt; data-navbar-click prop：

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”

Answer 2

您可以编写一个实用程序函数，将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 } />

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

2 个答案: