React.js：項目無法正常工作

Question

我正在做一個簡單的React.js項目。 該項目可以在這里找到。 HTML如下：

<header>
  <div class="container-center">
    <h1 class="text-center">Markdown Previewer</h1>
  </div>
</header>


  <div class="container-center" id="main-container">
  </div>


<footer>
  <div class="container-center">
    <p class="text-center">Copyright &copy; Sergey Kosterin, 2016. All rights reserved.</p>
  </div>
</footer>

Javascript代碼如下：

var RawTextContainer = React.createClass({
  render: function(){
    return (
      <h1>Raw Text</h1>
    );
  }
});

var MarkdownContainer = React.createClass({
  render: function(){
    return (
      <h1>Markdown Text</h1>
    );
  }
});

var MainAppContainer = React.createClass({
  render: function(){
    return (
      <div class="row">
        <div class="col-md-6">
          <RawTextContainer />
        </div>
        <div class="col-md-6">
          <MarkdownContainer />
        </div>
      </div>
    );
  }
});


ReactDOM.render(<MainAppContainer />, document.getElementById('main-container'));

我希望應用程序向我顯示包含一些文本的兩列。 但是我什么也沒看到。 我究竟做錯了什么？

Answer 1

React不使用class關鍵字。 取而代之的是應該是className 。 這是有關class & className關鍵字的有用鏈接。

var MainAppContainer = React.createClass({
  render: function(){
    return (
      <div className="row">  // className instead of class
        <div className="col-md-6"> // className instead of class
          <RawTextContainer />
        </div>
        <div className="col-md-6"> // className instead of class
          <MarkdownContainer />
        </div>
      </div>
    );
  }
});

如果不是答案，那么您必須提供有關問題的更多信息，例如堆棧跟蹤，錯誤等。很難猜測出問題出在哪里。

更新

可行的示例-> Pen示例我不知道為什么，但是Pen無法識別ReactDOM或您沒有包含它。 您可以嘗試通過React渲染您的組件。

React.render(<MainAppContainer/>, document...)

同樣，如果打開瀏覽器控制台，您將獲得有關某些錯誤或必需語句（在您的情況下不包括jQuery文件）的更多信息。

謝謝。