web-dev-qa-db-fra.com

Objet destructeur et ignorer l'un des résultats

J'ai:

const section = cloneElement(this.props.children, {
  className: this.props.styles.section,
  ...this.props,
});

À l'intérieur this.props, J'ai une propriété styles que je ne veux pas transmettre à l'élément cloné.

Comment puis-je faire?

javascriptreactjsdestructuringecmascript-next
20
Fez Vrasta

Vous pouvez utiliser la syntaxe de repos/propagation d'objet :

// We destructure our "this.props" creating a 'styles' variable and
// using the object rest syntax we put the rest of the properties available
// from "this.props" into a variable called 'otherProps' 
const { styles, ...otherProps } = this.props;
const section = cloneElement(this.props.children, {
  className: styles.section,
  // We spread our props, which excludes the 'styles'
  ...otherProps,
});

Je suppose que vous avez déjà pris en charge cette syntaxe sur la base de votre code ci-dessus, mais sachez qu'il s'agit d'une syntaxe proposée qui est mise à votre disposition via Babel stage 1 preset . Si vous obtenez des erreurs de syntaxe lors de l'exécution, vous pouvez installer le préréglage comme suit:

 npm install babel-preset-stage-1 --save-dev

Et puis ajoutez-le à la section des préréglages de votre configuration babel. Par exemple dans votre fichier .babelrc:

 "presets": [ "es2015", "react", "stage-1" ]

Mise à jour basée sur le commentaire de la question par OP.

D'accord, vous dites donc que vous avez déjà une variable styles déclarée avant ce bloc? Nous pouvons également gérer ce cas. Vous pouvez renommer vos arguments déstructurés pour éviter cela.

Par exemple:

const styles = { foo: 'bar' };

const { styles: otherStyles, ...otherProps } = this.props;
const section = cloneElement(this.props.children, {
  className: otherStyles.section,
  // We spread our props, which excludes the 'styles'
  ...otherProps,
});
22
ctrlplusb

ou vous pouvez faire quelque chose comme ça ...

var newProp = (this.props = {p1, p2,...list out all props except styles});
0
user796870

J'aime la réponse de ctrlplusb, mais voici une alternative utilisant Object.assign si vous ne voulez pas ajouter un nouveau preset babel:

const section = cloneElement(this.props.children, {
    className: this.props.styles.section,
    ...Object.assign({}, this.props, {
        styles: undefined
    })
});
0
Michael Parker