javascript - map 功能在 React 中不起作用

Question

我是 React JS 的新手，我正在 fiddler 中测试一些功能。我不确定为什么会出现指向 map 函数的错误。我无法渲染我定义的数组。

相关片段:

      {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 , 那么你必须返回 一个 元素。
在这里您返回 <p>和 TextNode
此外，您需要提供唯一的 key 。

试试这个:

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