Reactjs에서 {… this.props}의 의미는 무엇입니까?

의 의미는 무엇입니까

{...this.props}

그렇게 사용하려고 해요

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

스프레드 속성 이라고 하며 그 목적은 소품 전달을 더 쉽게 만드는 것입니다.

N 개의 속성을 받아들이는 구성 요소가 있다고 가정 해 보겠습니다. 숫자가 증가하면 이러한 정보를 전달하는 것은 지루하고 다루기 어려울 수 있습니다.

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

따라서 대신 이것을 수행하고 객체로 감싸고 스프레드 표기법을 사용하십시오.

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

이는 컴포넌트의 props로 압축을 풉니 다. 즉, props를 다른 컴포넌트로 전달할 때만 함수 {... props}내에서 "절대"사용하지 않습니다 render(). 포장을 푼 소품을 평소처럼 사용하십시오 this.props.x.

ES6 Spread_operator및 Destructuring_assignment.

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

다음과 같습니다. 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
);

또는 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
);

심판

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

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

다음과 같이 컴파일됩니다.

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

위에서 볼 수 있듯이 모든 props를 div.

ES-6 기능입니다. 즉, 소품의 모든 속성을 div.{... }

연산자는 객체의 속성을 추출하는 데 사용됩니다.

자식 구성 요소에서 소품을 사용합니다.

예를 들면

지금 컴포넌트 소품이

{
   booking: 4,
   isDisable: false
}

이 소품을 자녀의 compoenet에서 사용할 수 있습니다.

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

자식 구성 요소에서 모든 부모 소품을 받게됩니다.