在Reactjs中渲染时如何循环的提示

我是Reactjs新手，在这段代码中，我能够为每个产品呈现数据，但不能呈现其调用的ProductItem组件

有人能给我一个正确的方法来循环而不调用每个产品的ProductItem吗

App.js

ProductItem.js

不要插手。您将此.state.product作为类似的道具传递：

然后您的组件循环如下

this.props.products.map((product, index) => {
   <tr key={product.index}>
       <td>{product.name}</td>
       <td>{product.price}</td>
       <td>{product.quantity}</td>
       <td><button className="btn btn-danger">Delete</button></td>
   </tr>
})

---

在table tbody标签内

将table放入App.js，并在table body内循环trs。是否不将其放入循环？在不知道自己想做什么的情况下，除了不参与循环之外，很难知道如何提供帮助。@Abhishek，这是否有效？如果有效，那么接受答案，否则评论，什么不起作用？我会更新我的答案。事实上，他应该加入循环。他应该做的是将、和元素提取到应用程序组件中。或者创建一个包含ProductItem组件的新组件ProductTable。我想他不需要您提到的另一个组件ProductTable。此外，他还可以将ProductItem组件放入App.js中的表中，从而减少该组件的数量。但是他的代码场景说，他可以将产品作为道具传递，在ProductItem组件中，他可以在表体中循环。我正在为表创建新组件，即ProductItem，以保持我的app.js干净。这不起作用，我在这里遇到错误>this.props.products.mapproduct=>{

class ProductItem extends Component {


 render(){
  const {name, price, quantity} = this.props;
         return(
             <div className="container">           
                    <table className="table table-striped">
                     <thead>
                       <tr>
                         <th>Product Name</th>
                         <th>Product Price</th> 
                         <th>Quantity </th>  
                       </tr>
                     </thead>
                     <tbody>
                     <tr>
                       <td>{name}</td>
                       <td>{price}</td>
                       <td>{quantity}</td>
                       <td><button className="btn btn-danger">Delete</button></td>
                   </tr>
                   </tbody>
          </table>
        </div>
                );
            }
        }

<ProductItem products={this.state.product} />

this.props.products.map((product, index) => {
   <tr key={product.index}>
       <td>{product.name}</td>
       <td>{product.price}</td>
       <td>{product.quantity}</td>
       <td><button className="btn btn-danger">Delete</button></td>
   </tr>
})