Semantic UI sidebar throws console errors with ReactJS when render app to body

Any way to render Semantic-UI sidebar into a React App without using id tags in HTML body? I want to avoid having to render React components to tagis within the HTML body like NOT using: <div id="some-name"></div>.

I'm using Meteor but shouldn't make a difference for this issue appears React & Semantic UI specific.

The code below gives the following errors in browser console:

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 semantic-sidebar1

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);
  });
}

I have some experience implementing a reactJS + Semantic-UI sidebar, so might be able to help.

The reason the errors are being thrown is that the Sidebar component adheres to the <body> tag by default, and will add a pusher class to an adjacent element to use as the window content to move/cover during animation.

I'm not fully sure what you want to do, but it looks like you want to initialize the sidebar so the <body> tag is the parent tag of the React render result, but keep the DOM structure you provided. Something like this:

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

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

This will work fine if you are planning on using the <div class="pusher"> element as the context for the Semantic-UI. If this is the case, you need to define a context when you initialize the sidebar. You can initialize it in showSideMenu() but might be more appropriate in 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');
   }

This is documented in Using a custom context.

You need to change the context setting of the sidebar. Let try the code below and let me know if it works!

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

jQuery('.ui.sidebar').sidebar({
    context: '#application'
});

来源：https://stackoverflow.com/questions/31495447/semantic-ui-sidebar-throws-console-errors-with-reactjs-when-render-app-to-body

标签

meteor

reactjs

semantic-ui