将应用程序渲染到正文时，语义 UI 侧边栏会使用 ReactJS 引发控制台错误
[英] Semantic UI sidebar throws console errors with ReactJS when render app to body
本文介绍了将应用程序渲染到正文时，语义 UI 侧边栏会使用 ReactJS 引发控制台错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有什么方法可以在不使用 HTML 正文中的 id 标签的情况下将 Semantic-UI 侧边栏渲染到 React 应用程序中?我想避免在 HTML 正文中将 React 组件渲染为 tagis，例如不使用:<div id="some-name"></div>.
我正在使用 Meteor 但应该不会对这个问题产生影响 React &特定于语义 UI.
下面的代码在浏览器控制台中给出了以下错误:
Sidebar: 必须添加 pusher 元素.为了获得最佳性能，请确保正文内容位于 pusherSidebar 内:不得不移动侧边栏.为了获得最佳性能，请确保侧边栏和推杆是您的身体标签的直接子项 <div class= ui 侧边栏倒置垂直菜单左显示动画可见" data-reactid= .0.0"> ... </div>;警告:ReactMount:根元素已从其原始容器中删除.新容器:
index.html语义边栏1
app.js
//应用组件——代表整个应用App = React.createClass({showSideMenu() {$('.ui.sidebar').sidebar('切换');},使成为() {返回 (<div><div className="ui 侧边栏倒置垂直菜单"><a className="item">1</a><a className="item">2</a><a className="item">3</a>
<div className="pusher"><button onClick={this.showSideMenu} className="ui button">Test MyModalDlgOne</button><p/>反应应用程序.
);}});如果(流星.isClient){//这段代码只在客户端执行流星.启动(函数(){//页面准备好后使用 Meteor.startup 渲染组件//React.render(, document.getElementById("render-target"));React.render(, document.body);});}
解决方案
我有一些实现 reactJS + Semantic-UI 侧边栏的经验，所以也许可以提供帮助.
抛出错误的原因是 Sidebar 组件默认附着在
我不完全确定你想要做什么，但看起来你想要初始化侧边栏所以
<身体><!-- React 渲染的返回结果--><div><div class="ui sidebar"></div><div class="pusher"></div>
如果您计划使用 <div class="pusher"> 元素作为 Semantic-UI 的上下文，这将正常工作.如果是这种情况，则需要在初始化侧边栏时定义上下文.您可以在 showSideMenu() 中初始化它，但在 componentDidMount() 中可能更合适.
componentDidMount: function() {//本地化选择器而不是全局的 jQuery 搜索var rootNode = React.findDOMNode(this);//初始化侧边栏$(rootNode).find('.ui.sidebar').sidebar({上下文:$(rootNode)});},显示侧菜单:函数(){//和以前一样，可能想把它存储为一个变量var rootNode = React.findDOMNode(this);$(rootNode).find('.ui.sidebar').sidebar('toggle');}
这在使用自定义上下文中有说明.>
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.
这篇关于将应用程序渲染到正文时，语义 UI 侧边栏会使用 ReactJS 引发控制台错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
