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，然后你必须返回 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>);
})}

如果您不想（或在某些情况下不能）在span中包装内容，您可以创建＆amp;返回片段（非常方便）

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

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

Answer 3

可能是您使用的是字符串，所以您必须使用split方法并传入空字符串，例如myValue.split（''）。map（）;

map函数在React中不起作用

3 个答案: