Jakie jest znaczenie {… this.props} w Reactjs

119

Jakie jest znaczenie

{...this.props}

Próbuję to wykorzystać w ten sposób

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

reactjs Swaraj Ghosh
źródło

201

Nazywa się to atrybutami rozprzestrzeniania, a jego celem jest ułatwienie przekazywania rekwizytów.

Wyobraźmy sobie, że masz komponent, który przyjmuje liczbę N właściwości. Przekazywanie ich może być żmudne i nieporęczne, jeśli liczba wzrośnie.

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

Zamiast tego zrobisz to, zawiń je w obiekt i użyj notacji rozkładów

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

co rozpakuje go do właściwości w twoim komponencie, tj. „nigdy” nie używasz {... props}wewnątrz swojej render()funkcji, tylko wtedy, gdy przekazujesz właściwości do innego komponentu. Używaj rozpakowanych rekwizytów jak zwykle this.props.x.

Henrik Andersson
źródło

2

Wystarczy dodać, że może pomóc myśleć o nim jako o zamienniku, this.transferPropsToktóry został wycofany w React 0.12.xi zostanie usunięty w wersji 0.13.x. To oczywiście pozwala na znacznie bardziej zaawansowane wykorzystanie jednak po prostu tłumaczenia React 0.11.x-tych this.transferPropsTo(<Foo />)do <Foo {...this.props} />najbardziej przydatny dla osób wykorzystujących to przejście.

Mike Driver

13

Dobry awnser, ale „nigdy” nie używaj {... props} wewnątrz funkcji render (), tylko wtedy, gdy przekazujesz właściwości do innego komponentu. ' To bardzo mylące określenie. Zaleca się przepisanie: „Używasz {... props} wewnątrz swojego render () tylko wtedy, gdy przekazujesz właściwości do innego komponentu”. dla jasności.

dprogramz

17

To ES6 Spread_operatori Destructuring_assignment.

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

To jest równe 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
);

lub 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
źródło

1

Skompiluje się do tego:

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

Jak widać powyżej, przekazuje wszystkie swoje rekwizyty do pliku div.

Vad
źródło

1

Jest to funkcja ES-6. Oznacza to, że wydobywasz wszystkie właściwości rekwizytów w div.{... }

operator służy do wyodrębniania właściwości obiektu.

Mayank Soni
źródło

1

Będziesz używać rekwizytów w komponencie podrzędnym

na przykład

jeśli twoje właściwości teraz komponentu to

{
   booking: 4,
   isDisable: false
}

możesz użyć tego rekwizytu w swoim dziecięcym kompoenecie

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

w swoim komponencie potomnym otrzymasz wszystkie rekwizyty dla rodziców.

Todd Bauman
źródło

Dobra odpowiedź, ale byłaby jeszcze lepsza, gdybyś zawarł wyjaśnienie, do czego służą rekwizyty.

Mike Poole,

Jakie jest znaczenie {… this.props} w Reactjs

Odpowiedzi:

refs