`data- *`（ハイフンの場合）属性を小道具から破壊する方法は？

Question

私のコンポーネントの1つを機能的なステートレスコンポーネント（FSC）に変換しようとしています。

...restを使用している場合、FSCは最適化されません。したがって、コンポーネントの小道具を破棄する必要があります。

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

しかしそのdoesntのコンパイル：

が、私はその後、リンクで、私は同棲ハイフンを破壊したい

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

としてリンクを呼び出す>小道具をデータ・ナビゲーションバークリックします。だから私は試した：

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

しかし、それはうまく動作しません。

Answer 1

camelCaseのキー名をkebab /ハイフンケースのプロパティに変換し、それらをpropsオブジェクトから取り出し、JSXスプレッドを使用してコンポーネントでレンダリングするユーティリティ関数を記述できます。以下

例：

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 } />