Meteor 将应用程序呈现到主体时，语义UI侧边栏会引发与ReactJS有关的控制台错误_Meteor_Reactjs_Semantic Ui

Meteor 将应用程序呈现到主体时，语义UI侧边栏会引发与ReactJS有关的控制台错误

meteor reactjs

Meteor 将应用程序呈现到主体时，语义UI侧边栏会引发与ReactJS有关的控制台错误,meteor,reactjs,semantic-ui,Meteor,Reactjs,Semantic Ui,有没有办法在不使用HTML正文中的id标记的情况下，将语义UI边栏呈现到React应用程序中？我希望避免像不使用：那样将React组件呈现给HTML正文中的标记我正在使用Meteor，但不应该对这个问题产生影响，因为它是特定于语义UI的下面的代码给出了浏览器控制台中的以下错误： Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusherSidebar

有没有办法在不使用HTML正文中的id标记的情况下，将语义UI边栏呈现到React应用程序中？我希望避免像不使用：

那样将React组件呈现给HTML正文中的标记

我正在使用Meteor，但不应该对这个问题产生影响，因为它是特定于语义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:

侧栏：必须添加pusher元素。为获得最佳性能，请确保车身内容物位于推杆内：
必须移动侧边栏。为了获得最佳性能，请确保侧边栏和推杆是身体标签的直接子项… 
警告：ReactMount:根元素已从其原始容器中删除。新货柜：

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

//应用程序组件-表示整个应用程序
App=React.createClass({
showSideMenu（）{
$（“.ui.sidebar”）
.侧边栏（“切换”）；
},
render（）{
返回(
1.
2.
3.
试验粘多糖酮

反应应用程序。
);
}
});
if（Meteor.isClient）{
//此代码仅在客户端上执行
Meteor.startup（函数（）{
//在页面准备就绪后，使用Meteor.startup呈现组件
//React.render（，document.getElementById（“呈现目标”）；
React.render（，document.body）；
});
}

我有一些实现reactJS+语义UI侧边栏的经验，因此可能会有所帮助

引发错误的原因是，默认情况下，边栏组件遵循

标记，并将向相邻元素添加一个pusher类，用作动画期间要移动/覆盖的窗口内容

我不完全确定您想要做什么，但看起来您想要初始化侧栏，因此

标记是React render结果的父标记，但保留您提供的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 id="application">
    <div class="ui sidebar"></div>
    <div class="pusher"></div>
</div>

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


jQuery（'.ui.sidebar'）.sidebar({
上下文：“#应用程序”
});

错误会消失，但推送器中的内容会显示在侧边栏的上方，而不是下方。另外，在

showSideMenu（）

中添加代码示例没有任何区别，即似乎只需要在

componentDidMount（）

中编写的代码。这在主根上

修复了上面提到的覆盖问题，

className=“ui段可推”

。好的，现在我明白了，使用jQuery时，使用.findDOMNode比从DOM树的最顶端开始要快。RE:showSideMenu（）中的代码示例没有什么区别。这是一些单独的问题。单击链接以关闭侧栏是出于设计考虑，由您使用链接单击事件处理程序来实现。如果要使用覆盖转换而不是推送，可以在侧栏初始化设置中指定它，并将其与上下文一起作为另一个选项-转换：覆盖侧栏滚动页面内容并被固定顶部标题覆盖的问题取决于页面的布局方式。如果希望侧边栏独立于页面内容滚动，则它必须有自己的溢出CSS设置。它现在与页面内容一起滚动的原因意味着它与作为React rootnode的

元素的大小相同。请看一下示例的源代码。

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

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