컴포넌트에 가치를 두지 않고 소품을 전달하는 방법

컴포넌트에 가치를 두지 않고 소품을 전달하는 방법

어떻게 반응하는 컴포넌트에 가치 없이 프로펠러를 전달할 수 있을까요?

<SomeComponent disableHeight> {/* here */}
    {({width}) => (
        <AnotherComponent
            autoHeight {/* and here */}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

참고 - 이러한 소품에는 기본 소품 값이 지정되지 않았습니다.

그것에 대한 참조는 찾을 수 없는 것 같습니다만, 그러한 속성의 값을 관찰하는 것으로, 할당되어 있는 것을 알 수중에 있습니다.true디폴트입니다.

전달한 내용은 컴파일러에 의해 부울 속성으로 해석됩니다.이는 순수 HTML을 쓰는 경우에도 해당됩니다.값이 없는 속성은 부울로 해석됩니다.trueJSX는 HTML을 쓰기 위한 구문설탕이기 때문에 같은 동작을 하는 것이 타당합니다.

React 공식 문서에는 다음과 같은 내용이 있습니다.

부울 아트리뷰트

이는 종종 disabled, required, checked, readOnly 등의 속성을 가진 HTML 폼 요소를 사용할 때 발생합니다.Atribute 값을 생략하면 JSX는 이를 true로 취급합니다.false를 전달하려면 속성식을 사용해야 합니다.

// 이 두 개는 JSX에서 버튼을 비활성화하기 위해 동등합니다.

<input type="button" disabled />;
<input type="button" disabled={true} />;

// 이 두 가지는 JSX에서 버튼을 비활성화하지 않는 것과 동등합니다.

<input type="button" />;
<input type="button" disabled={false} />;

---

예

JSX:

<div>
  <Component autoHeight />
  <AnotherComponent autoHeight={null} />
</div>

JS:

React.createElement(
  "div",
  null,
  React.createElement(Component, { autoHeight: true }),
  React.createElement(AnotherComponent, { autoHeight: null })
);

여기 바벨 데모를 보세요.

---

솔루션

ctrlplusb가 설명한 바와 같이 "빈 소품"을 전달하고 싶다면 단순히 다음과 같은 값을 제공할 수 있습니다.null또는 심지어undefined.

다음과 같은 작업을 수행할 수 있습니다.

<SomeComponent disableHeight={null}>
    {({width}) => (
        <AnotherComponent
            autoHeight={null}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

라고 전달해 주겠지만undefined독서는 아마도 완전히 불필요할 것이다.this.props.autoHeight부터AnotherComponent항상 너에게 줄 것이다undefined(명시적으로 전달했는지 여부에 관계없이)autoHeight={undefined}전혀 그렇지 않을 수도 없이.패스null...의 가치가 있다고 분명히 말하고 있기 때문에, 그러한 경우에는 아마 더 좋을 것이다.'가치 없음'(예:null).

Yeah JSX 에서는, 다음의 프로퍼티가 표시되지 않습니다.=부울 true로 간주됩니다.

하나의 옵션은 단순히 null 값을 설정하는 것입니다.

<Foo name="Bob" surname={null} />

오브젝트를 통해 동적으로 속성 가방을 작성하고 필요한 경우에만 속성을 추가할 수도 있습니다.예를 들어 다음과 같습니다.

render() {
  const propBag = {
    width: width,
    height: 300
  };
  if (someCondition) {
    propBag.something = 'bob';
  }

  return (
    <FooComponent {...propBag} {..otherProps} />
  );
}

TL;DR: 빈 문자열 설정:

<Amp.AmpAccordion animate="">

설명.

위의 링크에서 복사+붙여넣기:

빈 문자열이 있는 Atribute는 값 없이 DOM으로 렌더링됩니다.

W3C 관련 매뉴얼:https://www.w3.org/TR/html5/syntax.html#elements-attributes

빈 속성 구문
아트리뷰트 이름만.값은 암묵적으로 빈 문자열입니다.

다음 예제에서는 디세이블 Atribute에 빈 Atribute 구문을 지정하고 있습니다.

<입력 무효>

빈 애트리뷰트 구문을 사용하는 애트리뷰트 뒤에 다른 애트리뷰트를 붙일 경우 두 애트리뷰트를 구분하는 공백 문자가 있어야 합니다.

언급URL : https://stackoverflow.com/questions/37828543/how-to-pass-props-without-value-to-component