反应.js:项目不起作用

React.js: project is not working

本文关键字：不起作用 项目 js 反应      更新时间：2023-09-26

我正在做一个简单的 React.js 项目。该项目可以在这里找到。该网页如下所示： 

<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'));

我希望应用程序向我显示包含一些文本的两列。但我什么也没看到。我做错了什么？

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>
    );
  }
});

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

更新

工作示例 -> 笔示例我不知道为什么，但笔无法识别ReactDOM或者您没有包含它。您可以尝试通过 React 渲染组件。

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

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

谢谢。

相关文章：