时间戳

首页 > 解决方案 > 如何在 React 中迭代组件内的组件

javascript - 如何在 React 中迭代组件内的组件

问题描述

我的产品组件仅显示产品、价格和描述

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

它由 App 组件呈现，该组件循环遍历 productsData 中的数据，并为数组中的每个索引呈现一个产品组件。

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."
    },

我假设我需要在产品组件中使用 .filter 方法，但我似乎无法弄清楚在哪里。我不断收到错误或未定义。有人可以澄清这一点，如何通过嵌套在其他组件中的组件进行迭代？

标签： javascriptarraysreactjs

解决方案

尝试这个：

 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

推荐阅读