Javascript 通过ReactJS使用MaterializeCSS显示HTML元素

我试图用ReactJS显示HTML元素。这些HTML元素使用物化ECS。当我在'regular'HTML中单独加载元素时，在index.HTML文件中，所有元素都会正确加载

这是我的密码：

index.js

const mainpage_buttons = (
      <div classname="side-options">
        <a classname="btn-floating btn-large red" data-activates="slide-out">
          <i classname="material-icons">menu</i>
        </a>
      </div>
);

const mainpage_sidenav = (
      <ul id="slide-out" className="side-nav">
        <li><a className="subheader">Active Surveys</a></li>
        <li><a href="#!">Survey 2</a></li>
        <li><a href="#!">Survey 3</a></li>
        <li><div className="divider" /></li>
        <li><a className="subheader">Inacitve Surveys</a></li>
        <li><a href="#!">Survey 1</a></li>
        <li><div className="divider" /></li>
        <li><a className="waves-effect" href="#!"><i className="material-icons">add</i>Create new survey</a></li>
        <li><a className="waves-effect" href="#!"><i className="material-icons">settings</i>Options</a></li>
        <li><a className="waves-effect" href="#!"><i className="material-icons">chat</i>Support</a></li>
      </ul>
  );


React.render(
  mainpage_buttons,
  document.getElementById('menu')
);
React.render(
  mainpage_sidenav,
  document.getElementById('sidebar')
);

//Query for NavBar
$('.btn-floating').sideNav({
      menuWidth: 300, // Default is 240
      edge: 'left', // Choose the horizontal origin
      closeOnClick: true 
    }
);

const主页面按钮=(









);
反应(
主页按钮，
document.getElementById（'菜单'）
);
反应(
主页_sidenav，
document.getElementById（'sidebar'）
);
//导航栏查询
$（'.btn浮动'）.sideNav({
menuWidth:300，//默认值为240
边：'左'，//选择水平原点
closeOnClick：对
}
);

index.html

<div id = "menu"></div>
<div id = "sidebar"></div>

它所做的只是显示一个空白屏幕

---

大多数有类似问题的人只需将

class

属性更改为

className

。我将我的HTML语法通过转换器，所以这当然不是问题。

错误完全是因为

className

的变量名不正确。代码中有一半是

classname

，而不是

classname

。正确的大小写可以解决问题