Geek Answers Handbook

Sidebar semantic interface displays console errors using ReactJS when rendering an application

Any way to display the Semantic-UI sidebar in a React application without using id tags in the body of the HTML? I want to not create React components for tagis inside the HTML body, as NOT using: <div id="some-name"></div> .

I use Meteor, but should not make any difference because this problem occurs. Specific for React and Semantic UI.

The following code shows the following errors in the 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); }); }
+6
source share
2 answers

I have experience implementing the sidebar actionJS + Semantic-UI, so I can help.

The reason that errors occur is because the sidebar component is applied to the <body> tag by default and will add a pusher class to the adjacent element, which will be used as the contents of the window to move / cover during the animation.

I'm not quite 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 rendering result, but keep the DOM structure that you provided. Something like that:

 <!-- 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 plan to use the <div class="pusher"> element as the context for the semantic interface. If so, you need to determine the context when initializing the sidebar. You can initialize it in showSideMenu() , but may 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 described in using a custom context .

+7
source

You need to change the context settings of the sidebar. 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' });
0
source

More articles:


All Articles