Qual é o significado de {… this.props} em Reactjs

119

Qual é o significado de

{...this.props}

Estou tentando usar assim

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

reactjs Swaraj Ghosh
fonte

201

É chamado de atributos de propagação e seu objetivo é facilitar a passagem de adereços.

Vamos imaginar que você tem um componente que aceita um número N de propriedades. Repassá-los pode ser entediante e difícil de controlar se o número aumentar.

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

Assim, em vez de fazer isso, envolva-os em um objeto e use a notação de propagação

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

que irá desempacotar nos adereços em seu componente, ou seja, você "nunca" usa {... props}dentro de sua render()função, somente quando você passa os adereços para outro componente. Use seus adereços desempacotados normalmente this.props.x.

Henrik Andersson
fonte

2

Só para adicionar, pode ajudar pensar nele como um substituto para o this.transferPropsToqual foi descontinuado no React 0.12.xe será removido no 0.13.x. É claro que permite um uso muito mais avançado, no entanto, simplesmente traduzir o React 0.11.x's this.transferPropsTo(<Foo />)para <Foo {...this.props} />é mais útil para as pessoas que estão fazendo essa transição.

Mike Driver

13

Boa observação, mas 'você "nunca" usa {... adereços} dentro de sua função render (), apenas quando passa os adereços para outro componente.' É um termo de expressão muito confuso. Recomendo reescrever é como "Você só usa {... props} dentro de seu render () quando você passa os props para outro componente." para maior clareza.

dprogramz

17

É ES6 Spread_operatore Destructuring_assignment.

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

É igual 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
);

ou 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

Ele irá compilar para:

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

Como você pode ver acima, ele passa todos os seus adereços para o div.

Vad
fonte

1

É um recurso ES-6. Isso significa que você extrai todas as propriedades dos adereços em div.{... }

operador é usado para extrair propriedades de um objeto.

Mayank Soni
fonte

1

Você usará adereços em seu componente filho

por exemplo

se seus acessórios agora são

{
   booking: 4,
   isDisable: false
}

você pode usar esses adereços na sua compoenet infantil

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

em seu componente filho, você receberá todos os adereços de seus pais.

Todd Bauman
fonte

Boa resposta, mas seria ainda melhor se você incluísse uma explicação sobre para que servem os adereços.

Mike Poole

Qual é o significado de {… this.props} em Reactjs

Respostas:

refs