Question

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

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

其中哪个是由App组件呈现的，它会循环遍历productsData中的数据并为数组中的每个索引呈现一个product组件。

class App extends React.Component {

  render() { 
    const products = productsData.map(product => {
      return <Product key={product.id} price={product.price}
      name={product.name} desc={product.description}   />
    })
    return (
      <div>
          {products}
      </div>
    );


  }
}

但是，出于学习目的，我试图弄清楚如何能够遍历这一系列产品组件（在App中呈现）以仅显示例如大于10的价格或说明例如，长度超过10个字符。

productsData看起来像这样

const productsData = [
    {
        id: "1",
        name: "Pencil",
        price: 1,
        description: "Perfect for those who can't remember things! 5/5 Highly recommend."
    },

我假设我需要在products组件内部使用.filter方法，但似乎无法弄清楚位置。我不断收到错误或未定义。有人可以解决这个问题吗，一个人如何通过嵌套在其他组件中的组件进行迭代？

Answer 1

尝试一下：

 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}   
    />
))

Chaining方法filter和map可以使您获得所需的结果。

在此处详细了解filter：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 2

您可以在.map中添加条件，如果条件匹配，则返回Product，否则返回null。

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

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

2 个答案: