Как показать/скрыть компоненты ReactJS

Попытка узнать ReactJS.. но меня смущает рендеринг компонента. Каждый пример, который я видел, определяет класс компонента React и в конце имеет что-то вроде:

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

Я понимаю, что он заменяет элемент "comp" моим компонентом.. это здорово. Но кажется, что если я загружу 20 компонентов, все 20 рендеринга. Тем не менее, я хочу только сделать некоторые и не все, но использовать все в течение всего моего SPA. Я использую маршрутизатор DirectorJS, и в зависимости от того, входит ли пользователь в систему или нет, и/или переходит к определенным ссылкам, я хочу показывать только один или несколько компонентов. Кажется, я не могу найти какую-либо информацию/примеры/обучающие материалы о том, как динамически управлять отображением или скрытием реагирующих компонентов. Более того, то, что я действительно хотел бы сделать, это частичные части загрузки в зависимости от ссылок, которые были нажаты, и в тех частицах, в которых они будут использовать реагирующие компоненты, поэтому только в это время загружать/использовать компонент. Возможно ли это... так как я могу справиться с этим? Я мог бы жить с загрузкой 20+ компонентов один раз при первом загрузке приложения, но я бы предпочел загружать их только при загрузке частичного компонента.

ОТВЕТЫ

Ответ 1

Сначала сделайте только то, что необходимо. Легче отслеживать и быстрее.

Фактически "обмениваться между страницами", это так же просто, как, например, установить переменную в вашем состоянии/реквизитах и ​​использовать этот var, чтобы условно отобразить все, что вам нужно. Роль выборочного рендеринга в том, что вы хотите, естественно, относится к родительскому компоненту. Здесь работает скрипка с директором: 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>
  );
}

Обратите внимание, что помимо синтаксиса JSX, выглядящего в стиле HTML, вы действительно используете JavaScript. Условные все еще работают, итерации все еще работают и т.д.