使用React显示动态数据

Question

所以我有一个非常简单的反应班，像这样

var Blog = React.createClass({
   render: function() {
     return (
     <div>
      <h1>{this.props.title}</h1>
      <h2>{this.props.content}</h2>
     </div>
     );
   }
});
var blogTitle = "This is the title"
var blogContent = "This is the content"
React.render(
  <Blog title={blogTitle} content={blogContent} />,
  document.getElementById('container')
);

但是我遇到了以下错误：JSX值应该是表达式或带引号的JSX文本

我知道我可以用

<Blog title="this is title" content="this is content" />

但是，我该怎么做才能显示动态数据呢？

Answer 1

render的返回值需要包装在一个封闭的标签中。 尝试：

var Blog = React.createClass({
    render: function () {
        return (
            <div>
                <h1>{this.props.title}</h1>
                <h2>{this.props.content}</h2>
            </div>
        );
    }
});

Answer 2

您需要使用大括号将参数包装起来：

<Blog title={blogTitle} content={blogContent} />

另外，我认为您的Blog组件不会呈现。 React要求每个组件内只有一个顶级JSX元素，因此您需要用另一个元素包装内容，如下所示：

var Blog = React.createClass({
   render: function() {
     return (
      <div>
          <h1>{this.props.title}</h1>
          <h2>{this.props.content}</h2>
      </div>
     );
   }
});

Answer 3

似乎是一个工具链问题，因为您的代码很好。