Verwenden Sie einen String-Schlüsselname mit React PropTypes

Question

Ich bin in einer Position, in der ich Zeichenfolgen als Schlüssel für ein Objekt verwenden muss, das ich als Requisiten an einige meiner React-Komponenten übergebe. Gibt es eine Möglichkeit, dies mit React PropTypes und Pass eslint zu arbeiten? Hier

ist einige Beispiel-Code:

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

In dem obigen Code, string-key-name das Problem verursacht. Ich muss - im Schlüsselnamen dieses Objekts verwenden. Ist das möglich?

EDIT

habe ich versucht, wie ['string-key-name'] eckige Klammern um die String-Schlüssel setzen und es hat nicht funktioniert.

EDIT 2

Der eslint Fehler ich immer bin, ist ein Requisiten Validierungsfehler fehlt. Seltsamerweise fehlt 'string-key-name' nicht aber foo und bar sind.

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

Answer 1

EDIT: Dies ist eine völlig irrelevante Antwort, weil der Mangel an Informationen.

Wenn Sie eckige Klammern verwenden möchten, sollten Sie eine Variable anstelle eines String-Literals einfügen.

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

Aber ich denke, man kann einfach eslint in diesem Fall deaktivieren, da Sie - trotzdem verwenden möchten.

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

oder

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

den Trick.

Answer 2

Ich habe es endlich herausgefunden.

In MyComponent Ich war Destrukturierung die Requisiten aus wie so:

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

Wenn ich meinen Code wie unten verändert, die Requisiten verschwunden Validierungsproblem.

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