Gia*_*Elk 6 meteor reactjs semantic-ui
有什么方法可以在不使用HTML正文中的id标签的情况下将Semantic-UI侧边栏呈现到React App中？我想避免在HTML体中将React组件呈现给tagis,就像不使用:<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 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);
});
}
我有一些实现reactJS + Semantic-UI侧边栏的经验,所以可能会有所帮助.
抛出错误的原因是边栏组件<body>默认粘贴到标签上,并将推送类添加到相邻元素,以用作在动画期间移动/覆盖的窗口内容.
我不完全确定你想做什么,但看起来你想初始化侧边栏,所以<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');
}
这在使用自定义上下文中有记录.
| 归档时间： |
|
| 查看次数： |
3059 次 |
| 最近记录： |