我正在尝试使用 ReactJS 显示 HTML 元素。这些 HTML 元素使用 MaterializeCSS。当我在“常规”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
}
);
index.html
<div id = "menu"></div>
<div id = "sidebar"></div>
它所做的只是显示一个空白屏幕。
大多数遇到类似问题的人只需将 class
属性更改为 className
即可。我将 HTML 语法设置为 this转换器,所以这肯定不是问题。
最佳答案
该错误绝对是 className
的变量名称不正确。代码中的一半是 classname
而不是 className
。正确的大小写可以解决问题。
关于javascript - 通过 ReactJS 使用 MaterializeCSS 显示 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46282786/