Question

我有基本的index.html和index.js，除了最小值之外没什么作用。我的html文件是这样的：

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="container"></div>
</body>
<script src="fb's react url"></script>
<script src="fb's reactDOM url"></script>
<script type="text/jsx" src="index.js"></script>

我的index.js文件是这样的：

var Grid = React.createClass({
      getInitialState: function() {
        return {
          grid: "Ola!"
        }
      },
      componentDidMount: function() {

      },
      render: function() {
        return ( < div > {
            Ola!
          } < /div >
        );
      }
  }
);

ReactDOM.render( < Grid / > ,
  document.getElementById('container')
);

当我在Google Chrome中加载我的页面（index.html）时，我只得到一个空白的白色屏幕。控制台没有输出任何错误。怎么可能出错？我是React.js和大多数网络技术的新手。

Answer 1

https://jsfiddle.net/9fcyrbj3/

在JSX中，花括号内的所有内容都将被评估为Javascript，因此它需要是一个有效的JS表达式。因此，{ Ola! }需要成为{ 'Ola!' }。

但是，你不需要花括号，你可以像这样简化：

render: function() {
    return (< div > Ola! < /div >);
  }

Answer 2

更改您的{}方法，如下所示。 ReactJS中的render: function() { return ( <div> Ola! </div> ); }将内部内容评估为表达式

{{1}}

ReactJS：为什么我的div不显示？

2 个答案: