在 Codepen.io 上使用 React.js，为什么自定义标记未呈现？

Question

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

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 CodepenCSS config

提前感谢您的帮助:-)

Answer 1

而不是

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

使用

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

检查工作example

勾选

在 Codepen.io 上使用 React.js，为什么自定义标记未呈现？

Using React.js on Codepen.io, Why is the custom tag not rendering?

javascript

css

reactjs

babeljs

codepen