Question

我正在制作一个简单的React.js项目。该项目可以找到here。 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。 Here是关于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>
    );
  }
});

如果答案不正确，那么您必须提供有关您的问题的更多信息，例如：堆栈跟踪，错误等。很难猜出你的问题在哪里。

<强> 更新

工作示例 - ＆gt; Pen Example我不知道原因，但 Pen 无法识别ReactDOM，或者您没有包含它。您可以尝试通过React呈现组件。

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

此外，如果您打开浏览器控制台，您将获得有关某些错误或必需语句的更多信息（在您的情况下，jQuery不包含文件）。

感谢。

React.js：项目无效

1 个答案: