React PropTypeで文字列キー名を使用する

Question

私は、Reactコンポーネントのいくつかに小道具として渡しているオブジェクトのキーとして文字列を使用する必要がある位置にいます。 React PropTypesでこの作業を行い、eslintを渡す方法はありますか？ string-key-nameが問題を引き起こしている、上記のコードで

MyComponent.propTypes = { 
    'string-key-name': PropTypes.shape({ 
    foo: PropTypes.func.isRequired, 
    bar: PropTypes.string.isRequired, 
    }).isRequired, 
}; 

：ここ

は、いくつかの例のコードです。このオブジェクトのキー名に-を使用する必要があります。これは可能ですか？

EDIT

私は['string-key-name']のような文字列のキーの周りに角括弧を入れてみました、それが動作しませんでした。私は取得しています

EDIT 2

eslintエラーが不足している小道具の検証エラーです。奇妙なことに、'string-key-name'はありませんが、fooとbarはありません。

'.foo' is missing in props validation  react/prop-types 
'.bar' is missing in props validation  react/prop-types 

Answer 1

EDITは：これは情報不足の全く無関係な答えです。

角括弧を使用する場合は、文字列リテラルの代わりに変数を配置する必要があります。

const keyName = 'string-key-name'; 
MyComponent.propTypes = { 
    [keyName]: PropTypes.shape({ 
    foo: PropTypes.func.isRequired, 
    bar: PropTypes.string.isRequired, 
    }).isRequired, 
}; 

はしかし、私はあなたがとにかく-を使用したいので、あなただけのこのケースでeslintを無効にすることができると思います。

'string-key-name': PropTypes.shape({ // eslint-disable-line 

または

// eslint-disable-next-line 
'string-key-name': PropTypes.shape({ 

トリックを行います。

Answer 2

私はついにそれを理解しました。 MyComponentで

は、私はそうのような小道具を構造化代入した

私は以下のように私のコードを修正

render() { 
    const { foo, bar } = this.props['string-key-name']; 
    return (
    <div> 
     {bar} 
    </div> 
); 

、小道具の検証の問題が消えました。

render() { 
    const props = this.props; 
    return (
    <div> 
     {props['string-key-name'].bar} 
    </div> 
);