在引号内使用JS var进行反应

Question

我刚开始使用React site

上的教程学习React

我想为JSON数组中的每个元素使用id。在引用this link后，我在我的代码中尝试了<div className="commentListElement" key={key} id={"comment-"+{key}} >，但它没有用。

  

显示comment-[object Object]

可悲的是${key}也没有用......！

这是我的代码：

  var data = [
    {id: 1, author: "Pete Hunt", text: "Sample Comment 1"},
    {id: 2, author: "Virginia Woolf", text: "Sample Comment 2"}
  ]

  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function(comment, key) {
        return (
          <div className="commentListElement" key={key} id={"comment-"+{key}} >
          Key: {key} <br />
          ID: {comment.id} <br />
          Commented by {comment.author} <br />
          Comment: {comment.text}
          </div>
        );
      });
      return (
        <div className="commentList">
          {commentNodes}
        </div>
      );
    }
  })

  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.
          <CommentList data={data} />
        </div>
      );
    }
  });
  ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
  );

但我在浏览器中看到了这个

我做错了什么？

Answer 1

在JSX内部花括号中你应该编写javascript表达式，这样就可以了：

mov ebx,WINDOW_HEIGHT / 2
sub ebx,eax
mov eax,height

mov screenypos,ebx

dec typeofwall

movss xmm0,floatingpoint
mulss xmm0,FP4(64.0f)

mov eax,typeofwall
cvtsi2ss xmm1,eax
mulss xmm1,FP4(64.0f)

addss xmm0,xmm1

movss tempvarr,xmm0
invoke FLOOR,tempvarr
cvtss2si eax, xmm0
mov finaltexturex,eax

;invoke 

BUILDRECT,screenpos,screenypos,linewidth,height,hdc,localbrush

invoke DrawImage,hdc,wolftextures,screenpos,screenypos,finaltexturex,0,linewidth,64,linewidth,height

此外，使用数组索引作为反应元素的键不是一个好习惯。您应该使用某种业务标识符，例如id={"comment-"+key} 。