Apa arti dari {… this.props} di Reactjs

Apa arti dari

{...this.props}

Saya mencoba menggunakannya seperti itu

 <div {...this.props}> Content Here </div>

Ini disebut atribut menyebar dan tujuannya adalah untuk membuat penyaluran alat peraga lebih mudah.

Mari kita bayangkan bahwa Anda memiliki komponen yang menerima sejumlah properti N. Meneruskan ini bisa membosankan dan sulit jika jumlahnya bertambah.

<Component x={} y={} z={} />

Jadi sebagai gantinya Anda melakukan ini, membungkusnya dalam sebuah objek dan menggunakan notasi penyebaran

var props = { x: 1, y: 1, z:1 };
<Component {...props} />

yang akan mengekstraknya ke dalam props pada komponen Anda, yaitu, Anda "tidak pernah" menggunakan {... props}di dalam render()fungsi Anda , hanya jika Anda meneruskan props ke komponen lain. Gunakan alat peraga Anda seperti biasa this.props.x.

Ini ES6 Spread_operatordan Destructuring_assignment.

<div {...this.props}>
  Content Here
</div>

Itu sama dengan Class Component

const person = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

class TestDemo extends React.Component {
    render() {
        const {name, age, country} = {...this.props};
        // const {name, age, country} = this.props;
        return (
          <div>
              <h3> Person Information: </h3>
              <ul>
                <li>name={name}</li>
                <li>age={age}</li>
                <li>country={country}</li>
              </ul>
          </div>
        );
    }
}

ReactDOM.render(
    <TestDemo {...person}/>
    , mountNode
);

atau Function component

const props = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

const Test = (props) => {
  return(
    <div
        name={props.name}
        age={props.age}
        country={props.country}>
        Content Here
        <ul>
          <li>name={props.name}</li>
          <li>age={props.age}</li>
          <li>country={props.country}</li>
        </ul>
    </div>
  );
};

ReactDOM.render(
    <div>
        <Test {...props}/>
        <hr/>
        <Test 
            name={props.name}
            age={props.age}
            country={props.country}
        />
    </div>
    , mountNode
);

ref

• https://babeljs.io/docs/plugins/transform-object-rest-spread/

• https://facebook.github.io/react/docs/components-and-props.html

Ini akan dikompilasi menjadi ini:

React.createElement('div', this.props, 'Content Here');

Seperti yang Anda lihat di atas, ia meneruskan semua propsnya ke div.

Ini adalah fitur ES-6. Artinya Anda mengekstrak semua properti props di div.{... }

operator digunakan untuk mengekstrak properti suatu objek.

Anda akan menggunakan props di komponen anak Anda

sebagai contoh

jika sekarang alat peraga komponen Anda

{
   booking: 4,
   isDisable: false
}

Anda dapat menggunakan alat peraga ini di komputer anak Anda

 <div {...this.props}> ... </div>

di komponen anak Anda, Anda akan menerima semua properti orang tua Anda.