反應使用JS變種引號內

Question

我剛開始學習使用作出反應的React site

我想用IDS的JSON數組中的每個元素教程。在參考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表達式，所以這應該工作：

id={"comment-"+key} 

此外，它是不使用數組索引作爲反應的元素的鍵一個很好的做法。您應該使用某種商業標識符，例如comment.id。