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

Question

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

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

.

Я понимаю, что он заменяет элемент «Comp» с моим компонентом .. Это здорово. Но кажется, что если я загружу 20 компонентов, все 20 визуализации. Однако я только хочу сделать некоторые, а не все, но использовать все во всем моем спа. Я использую Resorerjs Mar Router, и в зависимости от того, если пользователь входит в систему или нет, и / или идет к определенным ссылкам, я хочу показывать только один или около того из компонентов. Я не могу найти какие-либо информацию / примеры / учебные пособия о том, как динамически управлять отображением или скрытыми компонентами реагирования. Больше, то, что мне очень нравится делать, это загружать частичные части, в зависимости от кликов ссылок, и в этих частиц они будут использовать компоненты React, поэтому только в то время нагрузки / используют компонент. Это возможно .. если я могу справиться с этим? Я мог бы жить с загрузкой 20+ компонентами один раз в первый раз, когда приложение загружено, но я бы предпочел загружать их только, если в разделе «Частичный компонент отображается».

Answer 1

Во-первых, представляют только то, что необходимо.Легче отслеживать, и это быстрее.

На самом деле «своп между страницами», так же просто, как, хорошо, установив переменную в вашем штате / реквизитах и использовать это значение для условно, что вам нужно.Роль выборочно оказывает все, что вы хотите, естественно, идет на родительский компонент.Вот работающая скрипка с режиссером: 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.Условные условные рабочие, итерации все еще работают, и т. Д.