Боковая панель семантического пользовательского интерфейса выдает ошибки консоли с ReactJS при рендеринге приложения в тело

Любой способ отобразить боковую панель Semantic-UI в приложении React без использования тегов id в теле HTML? Я хочу избежать необходимости отображать компоненты React в тегах в теле HTML, например, НЕ используя: <div id="some-name"></div>.

Я использую Meteor, но это не должно иметь значения, поскольку эта проблема связана с React & Semantic UI.

Код ниже дает следующие ошибки в консоли браузера:

Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusherSidebar: 

Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div class=​"ui sidebar inverted vertical menu left uncover animating visible" data-reactid=​".0.0">​…​</div>​ 

Warning: ReactMount: Root element has been removed from its original container. New container:

index.html семантическая боковая панель1

app.js

// App component - represents the whole app
App = React.createClass({

  showSideMenu() {
    $('.ui.sidebar')
      .sidebar('toggle');
  },

  render() {
    return (
      <div>
         <div className="ui sidebar inverted vertical menu">
            <a className="item">
              1
            </a>
            <a className="item">
              2
            </a>
            <a className="item">
              3
            </a>
          </div>

        <div className="pusher">
          <button onClick={this.showSideMenu} className="ui button">Test MyModalDlgOne</button>

          <p />
          React App.
        </div>
      </div>
    );
  }
});

if (Meteor.isClient) {
  // This code is executed on the client only

  Meteor.startup(function () {
    // Use Meteor.startup to render the component after the page is ready
    // React.render(<App />, document.getElementById("render-target"));
    React.render(<App />, document.body);
  });
}

reactjs meteor semantic-ui
person Giant Elk    schedule 18.07.2015    source источник

Ответы (2)


arrow_upward
7
arrow_downward

У меня есть некоторый опыт реализации боковой панели reactJS + Semantic-UI, поэтому я могу помочь.

Причина, по которой возникают ошибки, заключается в том, что компонент боковой панели по умолчанию придерживается тега <body> и добавит класс pusher к соседнему элементу, чтобы использовать его в качестве содержимого окна для перемещения/закрытия во время анимации.

Я не совсем уверен, что вы хотите сделать, но похоже, что вы хотите инициализировать боковую панель, чтобы тег <body> был родительским тегом результата рендеринга React, но сохранил предоставленную вами структуру DOM. Что-то вроде этого:

<!-- Your desired parent element -->
<body>
    <!-- Return result of the React render -->
    <div>
        <div class="ui sidebar"></div>

        <div class="pusher"></div>
    </div>
</body>

Это сработает, если вы планируете использовать элемент <div class="pusher"> в качестве контекста для Semantic-UI. В этом случае вам необходимо определить контекст при инициализации боковой панели. Вы можете инициализировать его в showSideMenu(), но может быть более подходящим в componentDidMount().

   componentDidMount: function() {
       // Localize the selector instead of having jQuery search globally
       var rootNode = React.findDOMNode(this);

       // Initialize the sidebar
       $(rootNode).find('.ui.sidebar').sidebar({
           context: $(rootNode)
       });
   },
   showSideMenu: function() {
       // Same thing as before, might want to store this as a variable
       var rootNode = React.findDOMNode(this);
       $(rootNode).find('.ui.sidebar').sidebar('toggle');
   }

Это описано в разделе Использование пользовательского контекста.

person J3Y    schedule 21.07.2015
comment
Ошибки исчезают, но содержимое пушера отображается поверх боковой панели, а не под ней. Кроме того, добавление вашего примера кода в showSideMenu() не имеет значения, т.е. кажется, что нужен только код, который вы написали в componentDidMount(). - person Giant Elk; 25.07.2015
comment
Это в основном корневом каталоге <div> устраняет упомянутую выше проблему с наложением, className="ui segment pushable". - person Giant Elk; 25.07.2015
comment
Хорошо, теперь я понял, быстрее использовать .findDOMNode, чем начинать с самой вершины дерева DOM при использовании jQuery. RE: ваш пример кода в showSideMenu() не имеет значения. - person Giant Elk; 25.07.2015
comment
Есть побочный эффект: боковое меню теперь прокручивается вместе с содержимым страницы. И top fixed menu, созданный из отдельного компонента React, скрывает верхнюю часть боковой панели. У Semantic довольно строгие правила о том, что теги <div> являются братьями и сестрами, которые React нарушает, когда классы Semantic UI вложены внутри компонента React. - person Giant Elk; 25.07.2015
comment
Кроме того, щелчок по ссылке на боковой панели не закрывает боковую панель. - person Giant Elk; 25.07.2015
comment
Это какие-то отдельные проблемы. Щелчок по ссылке, чтобы закрыть боковую панель, предусмотрен дизайном, и вы можете реализовать его с помощью обработчика события щелчка по ссылке. Если вы хотите использовать оверлейный переход вместо толчка, вы можете указать его в настройках инициализации боковой панели вместе с контекстом в качестве еще одной опции — transition: overlay - person J3Y; 26.07.2015
comment
Проблема с боковой панелью, прокручиваемой содержимым страницы и закрытой фиксированным верхним заголовком, зависит от того, как вы хотите расположить страницу. Если вы хотите, чтобы боковая панель прокручивалась независимо от содержимого страницы, она должна иметь собственную настройку CSS переполнения. Причина, по которой он теперь прокручивается вместе с содержимым страницы, означает, что он имеет тот же размер, что и элемент <div>, который является корневым узлом React. Взгляните на исходный код примера пользовательского контекста. - person J3Y; 26.07.2015
comment
Спасибо. Я продолжу работать над этим и создам тестовую боковую панель без React, чтобы увидеть поведение по умолчанию за вычетом побочных эффектов от ошибок консоли. Как только я реализовал ваше исправление, поведение резко изменилось. - person Giant Elk; 28.07.2015
comment
@GiantElk Хотите знать, повезло ли вам с этим? Я пытаюсь реализовать что-то подобное и сталкиваюсь с той же проблемой. - Я попытался создать свой собственный компонент боковой панели, используя это руководство (jamesknelson .com/), но я не могу понять, как сохранить контекст боковой панели после ее отображения. - person flashpunk; 03.08.2015
comment
У меня не было времени пересмотреть это. Это в моем списке дел, просто не знаю, когда я до него доберусь. - person Giant Elk; 03.08.2015
comment
Спасибо @ J3Y, это было действительно полезно! - person levon; 07.02.2016

arrow_upward
1
arrow_downward

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

<div id="application">
    <div class="ui sidebar"></div>
    <div class="pusher"></div>
</div>

jQuery('.ui.sidebar').sidebar({
    context: '#application'
});
person Quy Tang    schedule 24.03.2016