web-dev-qa-db-ja.com

JSXスプレッド演算子の理解に関する問題

React docsからのこのサンプルコードを考えると：

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

...propsが実際に評価するものを調査しましたが、これは次のとおりです。

React.__spread({}, props)

次に{foo: x, bar: y}と評価されます。

しかし、私が疑問に思っているのは、なぜ私はこれを行うことができないのですか：

var component = <Component props />;

スプレッド演算子のポイントが何なのか理解できません。

reactjsecmascript-6react-jsx
24
ffxsam

これは、コードをより簡潔にするのに役立ちます-propsはオブジェクトであるため、スプレッド演算子は、渡すオブジェクトのpropertiesを取り、コンポーネントに適用します。したがって、コンポーネントには、fooの値を持つxおよびbarの値を持つyのプロパティがあります。

次と同じです。

var component = <Component foo={props.foo} bar={props.bar} />;

ただ短く

24
pherris

Object-rest-spread構文がreactでどのように機能するかについての最良の概要の1つは、 reactpatterns.com で公開されています。

JSXスプレッド属性

スプレッド属性はJSXの機能です。オブジェクトのすべてのプロパティをJSX属性として渡すための構文糖衣です。

これら2つの例は同等です。

// props written as attributes
<main className="main" role="main">{children}</main>

// props "spread" from object
<main {...{className: "main", role: "main", children}} />

これを使用して、propsを基礎となるコンポーネントに転送します。

const FancyDiv = props =>
  <div className="fancy" {...props} />

これで、FancyDivが関係する属性と関係ない属性を追加することが期待できます。

<FancyDiv data-id="my-fancy-div">So Fancy</FancyDiv>

// output: <div className="fancy" data-id="my-fancy-div">So Fancy</div>

順序が重要であることを覚えておいてください。 props.classNameが定義されている場合、classNameで定義されているFancyDivを上書きします。

<FancyDiv className="my-fancy-div" />

// output: <div className="my-fancy-div"></div>

FancyDivs classNameを、スプレッドプロパティ({...props})。

// my `className` clobbers your `className`
const FancyDiv = props =>
  <div {...props} className="fancy" />

これらのタイプの小道具は適切に処理する必要があります。この場合、著者のprops.classNameコンポーネントのスタイル設定に必要なclassName付き。

const FancyDiv = ({ className, ...props }) =>
  <div
    className={["fancy", className].join(' ')}
    {...props}
  />

- reactpatterns.com から引用- @ chantastic

別の優れた概要がbabeljsのブログ投稿で公開されました React on ES6 + Steven Luscher：

属性の分解と拡散

多くの場合、コンポーネントを構成するとき、すべてではなく、親コンポーネントの小道具のほとんどを子コンポーネントに渡したい場合があります。 ES6 +のデストラクチュアリングとJSXスプレッド属性を組み合わせると、これは式なしで可能になります。

class AutoloadingPostsGrid extends React.Component {
  render() {
    const {
      className,
      ...others  // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
      </div>
    );
  }
}

"BabelJS.org blog-React on ES6 +" by Steven Luscherから引用

8
Mac Cowell