스프레드 오퍼레이터에서 반응하여 여러 소품을 전달하는 방법

스프레드 오퍼레이터에서 반응하여 여러 소품을 전달하는 방법

나는 다음과 같은 것을 가지고 있다.

let objA = {varA,varB};
let objB = {varC, varD};

varA,varB,varC,varD를 내 구성요소로 전달하고 싶지만 objA와 objB 내부의 변수 수를 알 수 없으므로 하나씩 전달하지 않는다.

스프레드 오퍼레이터를 통해 이 작업이 가능하다고 리액션 문서를 읽어 보았다.

let bothObjects = {...arrA, ...arrB};
<Component {...bothObjects} />

하지만 세 번째 목적 없이 할 수 있을까?

이 작업은 다음과 같다.

<Component {...objA} {...objB} />

하지만 그게 맞는지는 잘 모르겠는데...이는 또한 다음과 같은 효과를 볼 수 있다.

<Component {...{...objA,...objB}} />

하지만 그것은 웃겨 보이고 나는 이것을 완전히 이해하지 못한다.

그러나 이것은 효과가 없다.

<Component {...objA, ...objB} />

왜 그런지...위에서 'both Objects'를 초기화할 때 효과가 있었으니까...그것은 또한 직관적으로 그것을 하는 적절한 방법처럼 보인다.

내가 어디서 잘못 생각하고 있는 거지?

먼저 JSX를 보십시오.할 때(시나리오 1):

<Component myProp={something} />

그something일반적으로 JavaScript 식입니다.

스프레드 연산자를 사용할 때 다음과 같이 (시나리오 2):

<Component {...something} />

그러면somethingJavaScript 객체여야 한다.

당신의 경우

고려하다objA그리고objB두 개의 JavaScript 개체로, 위의 시나리오 2처럼 사용할 수 있다.

<Component {...objA} {...objB} />

그리고 그들은 예상대로 일을 해야 한다.

수행 시:

let bothObjects = {...objA, ...arrB};
<Component {...bothObjects} />

다시 말하지만, 이것은bothObjects너무 과분하다.단 하나의 객체가 에 기초하여 구축됨objA그리고objB.

다른 경우:

<Component {...{...objA,...objB}} />

이상하게 보일 수도 있지만 완벽하게 작동한다.위 시나리오 2에서 JSX는 (In)을 예상한다.{...something}) 저something하나의 대상이다.그리고.{...objA,...objB} 하나의 대상이다.음, 사실 개체 유형의 값을 "반환"하는 표현이지만, 같은 표현이다.그것은 잘 작동한다.

마지막 경우:

<Component {...objA, ...objB} />

사용 기간 만료로 인해 작동하지 않음objA, ...objBJavaScript 개체가 아니다.그것은 사실 아무 의미도 없다. 그것은 구문 오류다.다음 오류 메시지를 참조하십시오.

VM2296 babel.js:17994 Uncaused SyntaxError: Babel 스크립트:예기치 않은 토큰, 예상된 }30 |31 | <밥> 32 | {...objA, ...objB}|                 ^

보다시피, 차르 다음에A의...objA, JSX는 단지 그것을 찾기를 기대했다.}그러나 그것은,즉 오류(예상치 않은 토큰).

뭘 쓸까?

이 세 가지 양식을 모두 고려할 때:

let bothObjects = {...objA, ...arrB};
<Component {...bothObjects} />
<Component {...objA} {...objB} />
<Component {...{...objA,...objB}} />

어느 것이 더 낫다고 말하는 것은 단지 취향의 문제다.더 읽기 쉽다고 생각되는 것을 골라라.

나머지 매개변수는 함수의 마지막 명명된 인수여야 하며, 두 개의 인수만 통과하면 된다.둘 다 따로따로 나누어야 한다.props처럼:,작업 시 시시 :::

<Component {...objA} {...objB} />

이 예에서 당신은 두 개를 가지고 있다.props, REST 매개변수가 첫 번째 입니다.

function sum(...theArgs, q) {
 return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}`

내가 그것을 놓을 때a매개변수 오류:

오류: rest parameter 후

편집: 그리고 @Omar가 옳다. 이 경우에는 둘 다 단순한 개체이기 때문에 REST Parameters를 사용할 필요가 없다.

다음과 같은 사항이 있는 경우

let objA = {varA,varB}; let objB = {varC, varD};

이 소품들을 소품으로 전달하기 위해 당신은 그저 하는 것뿐이다.

<Component objA={objA} objB={objB} />

사용할 이유가 없음...구문.

구성 요소에서 다음 구성 요소를 간단하게 평가하십시오.this.props.objA또는this.props.objB그런 다음 전달된 각 구성 요소에 있는 이러한 개체를 사용하여 원하는 작업을 수행할 수 있다.

이것은 나의 사용 사례였다.정의된 개체에서 일부 소품 변경:

<Component someProp={{...{...someObject, ...{someValue: false}}}} />

아래와 같은 추가 브레이스로 전달 -

여기서 closeModal은 반응 클래스 구성 요소에서 나의 방법이다.

{...{ ...this.props, closeModal: this.closeModal }}

더 많은 소품 전달:

{...{ ...
    this.props,
    method1: param => this.method1(param),
    method2: _ => this.method2()
}}

참조URL: https://stackoverflow.com/questions/49470037/how-to-pass-several-props-in-spread-operator-in-react