Soru JSX spread operatörünü anlamada sorun


Bu örnekte React dokümanlarından alınan kod:

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

Biraz neye baktım ...props aslında şu şekilde değerlendirir:

React.__spread({}, props)

Hangi sırayla değerlendirir {foo: x, bar: y}.

Ama merak ettiğim şey, neden bunu yapamıyorum:

var component = <Component props />;

Spread operatörünün ne anlama geldiğini anlamıyorum.


21
2017-09-02 22:04


Menşei


BTW, spread operatörü sadece JSX değil, ES6'nın bir parçasıdır - Dmitry Shvedov
Teknik olarak, diziler için rest-spread resmi olarak ES6'nın bir parçasıdır, ancak nesneler için dinlenmek standart onay sürecinin 3. Aşamasındadır. Bunu nesneler için kullanmak isterseniz, en azından babel.js ön ayarını kullanmanız gerekir sahne 3 veya doğrudan dönüşümü-nesne-dinlenme-yayılmış. - Mac Cowell


Cevaplar:


Bu, kodunuzu daha özlü hale getirmeye yardımcı olur - props bir nesnedir, yayılan operatör özellikleri girdiğiniz nesnenin ve bunları bileşene uygular. Böylece Bileşen özellikleri olacak bir foo değeri ile x ve bir bar değeri ile y.

Şununla aynı olurdu:

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

sadece kısa


22
2017-09-02 22:12





Nesne-dinlenme yayma sözdiziminin nasıl tepkiyle çalıştığına dair en iyi gözden geçirmelerden biri de reactpatterns.com:

JSX spread özellikleri

Spread Attributes bir JSX özelliğidir. Bir nesnenin tüm özelliklerini JSX öznitelikleri olarak iletmek için sözdizimsel şekerdir.

Bu iki örnek eşdeğerdir.

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

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

İletmek için bunu kullanın props temel bileşenlere.

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

Şimdi bekleyebilirim FancyDiv İlgilendikleri özniteliklerin yanı sıra bunlarla ilgili olmayanları eklemek.

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

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

Siparişin önemli olduğunu unutmayın. Eğer props.className tanımlı, clobber className tarafından tanımlanmış FancyDiv

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

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

Yapabiliriz FancyDivs className her zaman yayıldı sahne sonra yerleştirerek "kazanmak" ({...props}).

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

Bu türden sahneleri incelikle ele almalısın. Bu durumda, yazarın birleştirmek props.className ile className bileşenimi şekillendirmek için gerekliydi.

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

-- den alıntıdır reactpatterns.com tarafından @chantastic


Babeljs blog yazısında bir başka güzel genel bakış yayınlandı ES6 üzerinde tepki ver + Steven Luscher tarafından:

Yıkıcı özellikler ve yayılım özellikleri

Bileşenleri oluştururken çoğunlukla, ana bileşenin çoğunun bir alt bileşenini bir alt öğeye aktarmak isteyebiliriz, ancak bunların hepsini değil. ES6 + yıkımını JSX yayılma özellikleriyle birleştirirken, bu, tören olmadan mümkün olur:

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

-- den alıntıdır "BabelJS.org blogu - ES6 + üzerinde tepki" Steven Luscher tarafından


6
2018-04-10 08:07