ReactJS 구성 요소를 표시하거나 숨기는 방법

Question

ReactJS를 배우려고 합니다..하지만 나를 혼란스럽게 하는 것은 구성 요소의 렌더링입니다.내가 본 모든 예제는 React 구성 요소 클래스를 정의하며 마지막에는 다음과 같습니다.

React.renderComponent(
  <comp attr="value"" />,
  document.getElementById('comp')
);

나는 이것이 'comp' 요소를 내 구성 요소로 대체한다는 것을 이해합니다.훌륭해요.하지만 20개의 구성요소를 로드하면 20개 모두 렌더링되는 것 같습니다.그러나 전체가 아닌 일부만 렌더링하고 SPA 전체에서 모두 사용하고 싶습니다.저는 DirectorJS 라우터를 사용하고 있으며 사용자의 로그인 여부 및/또는 특정 링크로 이동하는지 여부에 따라 구성 요소 중 하나만 표시하고 싶습니다.반응 구성 요소 표시 또는 숨기기를 동적으로 관리하는 방법에 대한 정보/예제/튜토리얼을 찾을 수 없는 것 같습니다.더욱이 제가 정말로 하고 싶은 것은 클릭한 링크에 따라 부분을 로드하고 해당 부분에서 반응 구성 요소를 사용하므로 해당 시간에만 구성 요소를 로드/사용하는 것입니다.이것이 가능합니까? 그렇다면 어떻게 처리할 수 있습니까?앱이 처음 로드될 때 한 번에 20개 이상의 구성 요소를 로드할 수 있지만 구성 요소가 표시되는 부분이 로드된 경우에만 로드하는 것을 선호합니다.

Answer 1

먼저 필요한 것만 렌더링합니다.추적하기가 더 쉽고 빠릅니다.

실제로 "페이지 간 전환"을 하려면 상태/소품에 변수를 설정하고 해당 변수를 사용하여 필요한 것을 조건부로 렌더링하는 것만큼 간단합니다.원하는 것을 선택적으로 렌더링하는 역할은 자연스럽게 상위 구성 요소에 전달됩니다.Director와 함께 작동하는 바이올린은 다음과 같습니다. http://jsfiddle.net/L7mua/3/

앱의 주요 부분:

render: function() {
  var partial;
  if (this.state.currentPage === 'home') {
    partial = <Home />;
  } else if (this.state.currentPage === 'bio') {
    partial = <Bio />;
  } else {
    // dunno, your default page
    // if you don't assign anything to partial here, you'll render nothing
    // (undefined). In another situation you'd use the same concept to
    // toggle between show/hide, aka render something/undefined (or null)
  }
  return (
    <div>
      <div>I am a menu that stays here</div>
      <a href="#/home">Home</a> <a href="#/bio">Bio</a>
      {partial}
    </div>
  );
}

HTML처럼 보이는 JSX 구문을 넘어서 실제로는 JavaScript를 사용하고 있다는 점에 유의하세요.조건문은 여전히 ​​작동하고 반복은 여전히 ​​작동합니다.