Вопрос по reactjs, javascript, single-page-application – Как показать / скрыть компоненты ReactJS

15

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

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

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

Ваш Ответ

1   ответ
27

Во-первых, визуализируйте только то, что необходимо. Проще отследить и быстрее.

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

Форматирование здесь будет сложным. Можете ли вы разделить это на другой вопрос? chenglou
Хорошо ... застрял еще раз .. Я удалил React.renderComponent (<Dialog>, document.getElementById ('dialog')); из класса JS, в котором определен компонент. Вместо этого я хочу вызывать rednerComponent в функции JS только в том случае, если пользователь нажимает на данную ссылку, в результате чего появляется диалоговое окно. Как изменить <Dialog> на эквивалент JS, чтобы он работал при вызове моей функции JS? user3317868
В двух комментариях вы в значительной степени демистифицировали это для меня. :) Во всех примерах renderComponent () всегда находится в том же бите кода, что и фактическое создание класса, поэтому мне не было ясно, что вы можете визуализировать компонент, скажем, в JS-функции в тот момент, когда вы хотите покажи это. Так что спасибо за разъяснение этого! user3317868
Хорошо...stackoverflow.com/questions/22110886/... user3317868

Похожие вопросы