Was bedeutet {… this.props} in Reactjs?

119

Was ist die Bedeutung von

{...this.props}

Ich versuche es so zu benutzen

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

reactjs Swaraj Ghosh
quelle

201

Es heißt Spread-Attribute und hat zum Ziel, das Weitergeben von Requisiten zu erleichtern.

Stellen Sie sich vor, Sie haben eine Komponente, die N Eigenschaften akzeptiert. Diese weiterzugeben kann mühsam und unhandlich sein, wenn die Anzahl steigt.

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

Wickeln Sie sie stattdessen in ein Objekt ein und verwenden Sie die Spread-Notation

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

Dadurch wird es in die Requisiten Ihrer Komponente entpackt, dh Sie verwenden es "nie" {... props}in Ihrer render()Funktion, nur wenn Sie die Requisiten an eine andere Komponente weitergeben. Verwenden Sie Ihre ausgepackten Requisiten wie gewohnt this.props.x.

Henrik Andersson
quelle

2

Nur um es hinzuzufügen, kann es hilfreich sein, es als Ersatz zu betrachten, this.transferPropsToder in React 0.12.x veraltet war und in 0.13.x entfernt wird. Es ermöglicht natürlich eine viel fortgeschrittenere Verwendung, aber die einfache Übersetzung von React 0.11.x this.transferPropsTo(<Foo />)in <Foo {...this.props} />ist für Personen, die diesen Übergang vornehmen , am nützlichsten.

Mike Driver

13

Gute Antwort, aber 'Sie "verwenden" niemals {... Requisiten} in Ihrer render () - Funktion, nur wenn Sie die Requisiten an eine andere Komponente weitergeben.' Ist ein sehr verwirrender Ausdruck. Das Umschreiben wird wie folgt empfohlen: "Sie verwenden {... Requisiten} nur in Ihrem render (), wenn Sie die Requisiten an eine andere Komponente weitergeben." zur Klarheit.

Programm

17

Es ist ES6 Spread_operatorund Destructuring_assignment.

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

Es ist gleich 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
);

oder 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
quelle

1

Es wird dazu kompiliert:

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

Wie Sie oben sehen können, gibt es alle Requisiten an die div.

Vad
quelle

1

Es ist eine ES-6-Funktion. Es bedeutet, dass Sie alle Eigenschaften von Requisiten in extrahieren div.{... }

Der Operator wird verwendet, um Eigenschaften eines Objekts zu extrahieren.

Mayank Soni
quelle

1

Sie werden Requisiten in Ihrer untergeordneten Komponente verwenden

beispielsweise

wenn Ihre jetzt Komponente Requisiten ist

{
   booking: 4,
   isDisable: false
}

Sie können diese Requisiten in Ihrem Kind Compoenet verwenden

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

In Ihrer untergeordneten Komponente erhalten Sie alle übergeordneten Requisiten.

Todd Bauman
quelle

Gute Antwort, wäre aber noch besser, wenn Sie eine Erklärung hinzufügen würden, wofür Requisiten sind.

Mike Poole

Was bedeutet {… this.props} in Reactjs?

Antworten:

refs