javascript - 在 Codepen.io 上使用 React.js,为什么自定义标签不呈现?

标签 javascript css reactjs babeljs codepen

可能是一个非常初学者和愚蠢的问题,但每个人一开始都会学习..

HTML

<div class="container" id="container">

CSS(SCSS)

$back:#1D1F20;
$font:'Open Sans',sans serif;
body{
  background-color:$back;
  padding:20px;
  h1{
    font-family:$font;
    color:white;
  }
  DisplayBox{
    font-family:$font;
    color:white;
  }
}

JS(通天塔)

var DisplayBox=React.createClass({
  render:function(){
        return (
          <h1>Marked</h1>
        );
    }
});

React.render(<DisplayBox />,document.getElementById("container"));

我的目标是在 #container 中渲染自定义标签 DisplayBox 但它没有在 codepen.io 中渲染 JS config in Codepen CSS config

提前感谢您的帮助:-)

最佳答案

代替

React.render(<DisplayBox />,document.getElementById("container"));

使用

ReactDOM.render(<DisplayBox />,document.getElementById("container"));

检查工作example

检查 difference between React and ReactDOM

关于javascript - 在 Codepen.io 上使用 React.js,为什么自定义标签不呈现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43360934/

相关文章:

javascript - 如何使用 jquery 隐藏表行具有未经检查的输入

javascript - 单击按钮时调用外部 Javascript 的函数

html - BEM 中的 "independent"被认为是什么?

html - 如何动画扩展/收缩而不是向上/向下

CSS背景渐变动画不起作用

reactjs - 如何在 react 中隐藏登录和注册页面中的导航栏?

JavaScript 变量问题

javascript - 谷歌地图 SVG 标记不显示在 IE 11 上

javascript - 如何正确分离 firebase db 子事件监听器?

html - 如何在React Bootstrap中向Nav.Link添加点击事件监听器?