지도 함수가 작동하지 않습니다.

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, 
    }); 
})}