映射函数在 React 中不起作用

发布于 2025-01-11 12:14:03 字数 1107 浏览 0 评论 0原文

我是 React JS 的新手，我正在测试 fiddler 中的一些功能。我不知道为什么我收到指向地图函数的错误。我无法渲染我定义的数组。

相关片段：

      {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')
);

原文

I am new to React JS, I was testing out some functions in fiddler. I am not sure why I get an error pointing to the map function. I am not able to render the array i defined.

Relevant snippet:

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

Full code:

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')
);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等往事风中吹 2025-01-18 12:14:03

首先您错过了return，那么您必须返回ONE 元素。
在这里，您返回一个

和一个 TextNode

此外，您需要提供一个唯一的密钥。

尝试用这个：

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

First you missed to return, then you must return ONE element.
Here you return a <p> and a TextNode

Moreover you need to provide a unique key.

Try with this :

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

回复收藏 0 原文

浪漫之都 2025-01-18 12:14:03

您需要从 map 处理程序返回值。

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

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

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

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

You need to return value from map handler.

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

If you do not want to (or can't in some situations) wrap content in span, you can create & return fragment (very handy)

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

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

回复收藏 0 原文