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

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

使用React显示动态数据

3 个答案: