가치와 같은 이름의 리액트 소품

가치와 같은 이름의 리액트 소품

이름과 값이 같은 컴포넌트에 소품을 암묵적으로 전달할 수 있습니까?

예:예를 들어 다음과 같은 변수가 있다고 가정해 봅시다.x:const x = 1; 그리고 나는 소품이라는 소품을 가진 컴포넌트를 가지고 있다.x이 변수를 암묵적으로 값으로 전달할 수 있습니까?다음과 같이 합니다.<div x/>?

@Ajay도 코멘트에서 지적했듯이 Booan은 컴포넌트에 암묵적으로 전달될 수 있습니다.

<div x />

이 값은 기본적으로는

<div x={true} />

단, 변수가 부울이 아닌 경우에는 다음과 같이 작성해야 합니다.

<div x={x} />

아니면 그런 소품들이 많으면 이런 걸 만들 수 있어요.

const cmpProps = {
   x,
   y,
   foo,
   bar
}

다음과 같은 분산 속성을 사용하여 전달합니다.

<Comp {...cmpProps} />

나는 이 답들을 읽을 때 약간의 깨달음을 얻었다.ES6+에서는 다음과 같은 기존 변수를 개체에 추가할 수 있습니다.

const x = 42;
const obj = { x, y: 1337 };
console.log(obj); // result { x: 42, y: 1337 }

즉, 다음과 같이 React 구성 요소에 명명된 프로포트를 추가할 수 있습니다.

const x = 42;
const elm = <MyComponent {...{x}} />;

값이 할당되지 않은 프로펠(prople)은 할 수 없습니다.<div x />)는 ( )의 단축형입니다.<div x={true} />(Ajay Varghese가 지적한 바와 같이);

동일한 변수 이름을 전달하면<div x={x} />

JSX 소품에서 직접 여러 값을 전달해야 하는 경우 JSX 스프레드 속성을 사용할 수 있습니다.

const divProps = { x: 1, y: 2 };
...
<div {...divProps} />

그것은 종종 부모로부터 자녀에게 모든 소품을 물려줄 때 사용된다.

확산 후에 프로펠을 할당함으로써 프로펠을 덮어쓸 수도 있습니다.

<div {...divProps} x=3 />

언급URL : https://stackoverflow.com/questions/51148064/reacts-props-with-the-same-name-as-their-value