Utilisez un nom de clé de chaîne avec React PropTypes

Question

Je suis dans une position où j'ai besoin d'utiliser des chaînes comme clés pour un objet que je transmets comme accessoires à quelques-uns de mes composants React. Y at-il un moyen de faire ce travail avec React PropTypes et passer eslint?

Voici quelques exemples de code:

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

Dans le code ci-dessus, string-key-name est l'origine du problème. Je dois utiliser - dans le nom de clé de cet objet. Est-ce possible?

EDIT

J'ai essayé de mettre des crochets autour de la clé de chaîne comme ['string-key-name'] et cela n'a pas fonctionné.

EDIT 2

L'erreur de eslint Je reçois une erreur de validation des accessoires manquants. Bizarrement, 'string-key-name' ne manque pas mais foo et bar sont.

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

Answer 1

EDIT: Ceci est une réponse tout à fait hors de propos en raison du manque d'information.

Si vous souhaitez utiliser des crochets, vous devez placer une variable au lieu d'une chaîne littérale.

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

Cependant, je pense que vous pouvez simplement désactiver eslint dans ce cas parce que vous voulez utiliser - de toute façon.

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

ou

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

fera l'affaire.

Answer 2

J'ai finalement compris.

En MyComponent j'étais déstructurant les accessoires sur comme ceci:

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

Quand je modifié mon code comme ci-dessous, les accessoires problème de validation a disparu.

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