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

时间:2017-04-12 05:25:15

标签: javascript css reactjs babel 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(Babel)

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

提前感谢您的帮助: - )

1 个答案:

答案 0 :(得分:1)

而不是

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

使用

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

检查工作example

检查difference between React and ReactDOM