マップ機能が反応しない

Question

私はReact JSの新機能です。私は、フィドラーでいくつかの機能をテストしていました。なぜマップ関数を指すエラーが出るのかわかりません。私は定義した配列をレンダリングできません。

関連スニペット：

 {this.props.data.productSpecs.map(function(productSpec){ 
     <b>Category Name:</b> {productSpec}; 
     })} 

全コード：

var productCategory = { 
    productName: 'SamamgaTV1', 
    productCategory: 'Television', 
    productSpecs: ['32inch','black','hd'] 
}; 

var ProductComponent = React.createClass({ 
    render: function() { 
    return(<div> 
         <h2>Product</h2> 
       <b>Product Name:</b> {this.props.data.productName} 
       <h2>Category</h2> 
       <b>Category Name:</b> {this.props.data.productCategory} 
       <h2>Specs</h2> 
       {this.props.data.productSpecs.map(function(productSpec){ 
       <b>Category Name:</b> {productSpec}; 
       })} 
      </div>); 
    } 
}); 

ReactDOM.render(
    <ProductComponent data={productCategory} />, 
    document.getElementById('container') 
); 

Answer 1

まずあなたがreturnに逃しを作成することができますONE要素を返す必要があります。 ここでは<p>とTextNode

を返します。さらに、固有のキーを入力する必要があります。

これを試してみてください：

{this.props.data.productSpecs.map(function(productSpec, i){ 
     return <span key={i}><b>Category Name:</b> {productSpec}</span>; 
})} 

Answer 2

あなたはmapハンドラから値を返す必要があります。あなたがしたくない（またはいくつかの状況ではできません）スパンでコンテンツをラップした場合

{this.props.data.productSpecs.map(function(productSpec){ 
    return (<span><b>Category Name:</b> {productSpec}<span>); 
})} 

、あなたは、（非常に便利）&リターンフラグメント

const createFragment = require('react-addons-create-fragment'); 

{this.props.data.productSpecs.map(function(productSpec){ 
    return createFragment({ 
     bold: <b>Category Name:</b>, 
     spec: productSpec, 
    }); 
})}