は、私はちょうど学習を始め引用符

Question

内のJSのVARを使用して反応させ、私はJSON配列内の各要素のIDを使用したいReact site

上のチュートリアルを使用して反応します。 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') 
); 

しかし、私は間違って何をやっている

私のブラウザでこれを参照してください？

これは動作するはずですようにしますが、JavaScript式を記述する必要があり、中括弧内のJSXで

Answer 1

：

id={"comment-"+key} 

さらに反応する要素のキーとして配列インデックスを使用することをお勧めではありません。たとえば、何らかの種類のビジネス識別子を使用する必要があります。 comment.id。