Qual è il significato di {… this.props} in Reactjs

119

Qual è il significato di

{...this.props}

Sto cercando di usarlo in questo modo

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

reactjs

— Swaraj Ghosh
fonte

201

Si chiama spread attributes e il suo scopo è quello di rendere più facile il passaggio degli oggetti di scena.

Immaginiamo di avere un componente che accetta un numero N di proprietà. Trasmetterli può essere noioso e ingombrante se il numero cresce.

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

Così invece fai questo, avvolgili in un oggetto e usa la notazione diffusa

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

che lo decomprimerà negli oggetti di scena sul tuo componente, cioè, "non" usi mai {... props}all'interno della tua render()funzione, solo quando passi gli oggetti di scena a un altro componente. Usa i tuoi oggetti di scena non imballati normalmente this.props.x.

— Henrik Andersson
fonte

2

Solo per aggiungere, può essere utile pensarlo come un sostituto this.transferPropsToche è stato deprecato in React 0.12.x e verrà rimosso in 0.13.x. E, naturalmente, permette l'utilizzo molto più avanzato tuttavia semplice traduzione Reagire 0.11.x di this.transferPropsTo(<Foo />)a <Foo {...this.props} />è più utile per le persone che fanno questa transizione.

— Mike Driver

13

Bravo proprietario, ma "non usi" mai "{... props} nella funzione render (), solo quando passi gli oggetti di scena a un altro componente." È un termine di frase molto confuso. Consiglia di riscrivere è come "Usi solo {... props} all'interno del tuo render () quando passi gli oggetti di scena a un altro componente." per chiarezza.

— dprogramz

17

È ES6 Spread_operatore Destructuring_assignment.

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

È uguale a 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
);

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

refs

— xgqfrms
fonte

1

Compilerà in questo modo:

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

Come puoi vedere sopra, passa tutti i suoi oggetti di scena al file div.

— vad
fonte

1

È la caratteristica ES-6. Significa che estrai tutte le proprietà degli oggetti di scena in div.{... }

L'operatore viene utilizzato per estrarre le proprietà di un oggetto.

— Mayank Soni
fonte

1

Userai oggetti di scena nel tuo componente figlio

per esempio

se i tuoi oggetti di scena adesso sono

{
   booking: 4,
   isDisable: false
}

puoi usare questi oggetti di scena nel tuo bambino compoenet

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

nel tuo componente figlio, riceverai tutti gli oggetti di scena dei tuoi genitori.

— Todd Bauman
fonte

Buona risposta ma sarebbe ancora meglio se includessi una spiegazione su cosa sono gli oggetti di scena.

— Mike Poole