Javascript 如何在React中的组件内部迭代组件

我有我的产品组件，它只显示产品、价格和说明

const Product = (props) =>{
    return(
        <div>
            <p>Price: {props.price} </p>
            <p>Name: {props.name}</p>
            <p>Description: {props.desc}</p>
        </div>
    )
}

我假设我需要在products组件中使用.filter方法，但我似乎不知道在哪里。我不断地得到错误或未定义。 有人可以澄清一下，我们将如何迭代嵌套在其他组件中的组件吗？

试试这个：

 const products = productsData.filter(product => (
  product.price > 10 || product.description.length > 10
)).map(p => (
   <Product key={p.id} price={p.price}
     name={p.name} desc={p.description}   
    />
))

const products=productsData.filter（产品=>(
product.price>10 | | product.description.length>10
)).map（p=>(
))

使用

map

的

链接

方法

过滤器

可以获得所需的结果

---

阅读有关

过滤器的更多信息：
您可以在
.map
中添加条件，如果条件匹配，则返回
产品
，否则返回
空

const products = productsData.map((product) => {
  if (product.price > 10 || product.description.length > 10)
    return (
      <Product
        key={product.id}
        price={product.price}
        name={product.name}
        desc={product.description}
      />
    );
  return null;
});

const products=productsData.map（（产品）=>{
如果（product.price>10 | | product.description.length>10）
返回(
);
返回null；
});
可以链接过滤和映射等功能。所以我会先过滤然后映射。例如
…products=productsData.filter（（{price，description}）=>price>10&&description.length>10）.map（产品…
现在很明显！是的！我想我想我想得太多了，认为我必须在组件中设置一些条件，而我自己完全忘记了链接方法！出于某种原因，我认为我必须在组件中设置一个条件。@Jesse将此标记为正确答案，如果它对您有所帮助，可能会对未来的读者有所帮助。
 const products = productsData.filter(product => (
  product.price > 10 || product.description.length > 10
)).map(p => (
   <Product key={p.id} price={p.price}
     name={p.name} desc={p.description}   
    />
))

const products = productsData.map((product) => {
  if (product.price > 10 || product.description.length > 10)
    return (
      <Product
        key={product.id}
        price={product.price}
        name={product.name}
        desc={product.description}
      />
    );
  return null;
});