web-dev-qa-db-ja.com

オブジェクトを破壊し、結果の1つを無視する

私が持っています：

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

内側this.props、クローンした要素に渡したくないstylesプロパティがあります。

どのようにできるのか？

javascriptreactjsdestructuringecmascript-next
20
Fez Vrasta

object rest/spread syntax を使用できます。

// 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,
});

上記のコードに基づくこの構文はすでにサポートされていると思いますが、これは babelステージ1プリセット を介して使用できるように提案された構文であることを認識してください。実行時に構文エラーが発生した場合は、次のようにプリセットをインストールできます。

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

次に、それをバベル構成のプリセットセクションに追加します。たとえば、.babelrcファイルで：

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

OPによる質問のコメントに基づいて更新します。

さて、あなたはすでにこのブロックの前に宣言されたstyles変数を持っていると言いますか？このケースも管理できます。これを回避するために、分解された引数の名前を変更できます。

例えば：

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

またはあなたはこのようなことをすることができます...

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

私はctrlplusbの答えが好きですが、新しいbabelプリセットを追加したくない場合は、ここで Object.assign を使用する代替方法を示します。

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