JSX에 요소를 선택적으로 포함 시키려면 어떻게해야합니까? 다음은 컴포넌트가 전달 된 경우 컴포넌트에 있어야하는 배너를 사용하는 예제입니다. 피하고 싶은 것은 if 문에서 HTML 태그를 복제해야합니다.

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

답변

배너를 정의되지 않은 상태로두면 포함되지 않습니다.

답변

이건 어때? 간단한 도움 If컴포넌트를 정의 해 봅시다 .

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

그리고 이런 식으로 사용하십시오 :

render: function () {
    return (
        <div id="page">
            <If test={this.state.banner}>
                <div id="banner">{this.state.banner}</div>
            </If>
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

업데이트 : 내 대답이 대중화 되면서이 솔루션과 관련된 가장 큰 위험에 대해 경고해야한다고 생각합니다. 다른 답변에서 지적했듯이 <If />구성 요소 내부의 코드 는 조건이 true인지 false인지에 관계없이 항상 실행됩니다. 따라서 다음 예제 는 banneris 인 경우 실패 null합니다 (두 번째 줄의 속성 액세스 참고).

<If test={this.state.banner}>
    <div id="banner">{this.state.banner.url}</div>
</If>

사용할 때주의해야합니다. 대안 (safer) 접근법에 대한 다른 답변을 읽는 것이 좋습니다.

업데이트 2 : 이 접근법은 위험 할뿐만 아니라 필사적으로 번거 롭습니다. 개발자 (me)가 패턴을 전달하려고 할 때 한 영역에서 다른 영역으로 접근하려고 시도하지만 실제로 작동하지 않습니다 (이 경우 다른 템플릿 언어)의 전형적인 예입니다.

조건부 요소가 필요한 경우 다음과 같이하십시오.

render: function () {
    return (
        <div id="page">
            {this.state.banner &&
                <div id="banner">{this.state.banner}</div>}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

else 브랜치가 필요한 경우 삼항 연산자를 사용하십시오.

{this.state.banner ?
   <div id="banner">{this.state.banner}</div> :
   <div>There is no banner!</div>
}

더 짧고 우아하며 안전합니다. 나는 항상 그것을 사용합니다. 유일한 단점은 else if쉽게 분기 할 수는 없지만 일반적으로 그렇게하지는 않는다는 것입니다.

어쨌든 이것은 JavaScript의 논리 연산자 가 작동 하는 방식 덕분에 가능 합니다. 논리 연산자는 다음과 같은 작은 트릭을 허용합니다.

<h3>{this.state.banner.title || 'Default banner title'}</h3>

답변

개인적으로, ( JSX In Depth )에 표시되는 삼항식 이 ReactJs 표준을 따르는 가장 자연스러운 방법이라고 생각합니다.

다음 예를 참조하십시오. 첫눈에 약간 지저분하지만 잘 작동합니다.

<div id="page">
  {this.state.banner ? (
    <div id="banner">
     <div class="another-div">
       {this.state.banner}
     </div>
    </div>
  ) :
  null}
  <div id="other-content">
    blah blah blah...
  </div>
</div>

답변

당신은 또한 그것을 쓸 수 있습니다

{ this.state.banner && <div>{...}</div> }

당신이 경우 state.banner이다 null하거나 undefined, 조건의 오른쪽 건너 뜁니다.

답변

If코드 블록이 있기 때문에 스타일의 구성 요소는 위험 항상 실행 에 관계없이 상태. 예를 들어 다음과 같은 경우 null 예외 banner가 발생합니다 null.

//dangerous
render: function () {
  return (
    <div id="page">
      <If test={this.state.banner}>
        <img src={this.state.banner.src} />
      </If>
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

또 다른 옵션은 인라인 함수를 사용하는 것입니다 (특히 else 문에 유용).

render: function () {
  return (
    <div id="page">
      {function(){
        if (this.state.banner) {
          return <div id="banner">{this.state.banner}</div>
        }
      }.call(this)}
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

반응 문제의 또 다른 옵션 :

render: function () {
  return (
    <div id="page">
      { this.state.banner &&
        <div id="banner">{this.state.banner}</div>
      }
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

답변

&& + 코드 스타일 + 작은 구성 요소

이 간단한 테스트 구문 + 코드 스타일 규칙 + 작은 집중 구성 요소는 나에게 가장 읽기 쉬운 옵션입니다. false, 0또는 과 같은 허위 값에 특별한주의를 기울여야합니다 "".

render: function() {
    var person= ...;
    var counter= ...;
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== 'undefined') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

표기법

ES7 stage-0 do 표기법 구문도 매우 좋으며 IDE가 올바르게 지원할 때 확실히 사용할 것입니다.

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

자세한 내용은 여기에 있습니다 : ReactJs- “If”컴포넌트 만들기 … 좋은 생각입니까?

답변

간단하고 함수를 만듭니다.

renderBanner: function() {
  if (!this.state.banner) return;
  return (
    <div id="banner">{this.state.banner}</div>
  );
},

render: function () {
  return (
    <div id="page">
      {this.renderBanner()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

이것은 내가 개인적으로 항상 따르는 패턴입니다. 코드를 정말 깨끗하고 이해하기 쉽게 만듭니다. Banner또한 너무 커지면 (또는 다른 장소에서 재사용 할 경우) 자체 구성 요소 로 리팩토링 할 수 있습니다 .