根據React中對象的索引渲染不同的html

Question

在我的流星項目中，我有一個叫做拍賣的收藏。 使用react我希望渲染此拍賣的3列，行數不受限制。 為此，我認為可以發送對象的索引，但是我不知道該怎么做。 另一個問題是，由於我沒有關閉'div'標簽，因此它顯示了html代碼錯誤。

這是我的App.js：

            import React, { Component } from 'react';
            import ReactDOM from 'react-dom';
            import { withTracker } from 'meteor/react-meteor-data';

            import { Auctions } from '../api/auctions.js';

            import Auction from './Auction.js';

            //App component - represents the whole app
            class App extends Component {
                renderAuctions() {
                    return this.props.auctions.map((auction, index) => (
                        <Auction key={auction._id} auction={auction} index={index} />
                    ));
                }

                render() {
                    return (
                        <div className="container section">
                            <div className="row">
                                {this.renderAuctions()}
                            </div>
                        </div>
                    );
                }
            }

            export default withTracker(() => {
                return {
                    auctions: Auctions.find({}).fetch(),
                };
            })(App);

而我的Auction.js：

            import React, { Component } from 'react';

            //Task component - resepresnts a single todo item

            export default class Auction extends Component {
                render() {
                    if(index % 3 === 0) {
                        return (
                            </div> /* Shows an erros here because of closing tag*/
                            <div className="row">
                                <div className="col s4 ">
                                    <div className="card">
                                        <div className="card-image">
                                            <img src="images/logo.png" />
                                        </div>
                                        <div className="card-content">
                                            <span className="card-title">
                                                {this.props.auction.auctionName}
                                            </span>
                                            <p>
                                                I am a very simple card. I am good at containing small bits of information.
                                                I am convenient because I require little markup to use effectively.
                                            </p>
                                        </div>
                                        <div className="card-action">
                                            <a href="#">This is a link</a>
                                        </div>
                                    </div>
                                </div>
                        );
                    } else {
                        <div className="col s4">
                            <h1>Brincoooo</h1>
                            <div className="card">
                                <div className="card-image">
                                    <img src="images/logo.png" />
                                </div>
                                <div className="card-content">
                                    <span className="card-title">
                                        {this.props.auction.auctionName}
                                    </span>
                                    <p>
                                        I am a very simple card. I am good at containing small bits of information.
                                        I am convenient because I require little markup to use effectively.
                                    </p>
                                </div>
                                <div className="card-action">
                                    <a href="#">This is a link</a>
                                </div>
                            </div>
                        </div>
                    }

                }
            }

Answer 1

每當您從渲染函數返回HTML時，它都必須是自包含的並且具有平衡的標簽。 那就是React的工作方式，以及為什么它會給您帶來錯誤。

您可以考慮使用flexbox，而不是嘗試一次將3個拍賣分組。 使用flexbox，您只需渲染所有拍賣，它就會自動為您處理換行。 屏幕較寬的用戶將看到3列以上，而移動用戶在縱向模式下可能會看到一列。

如果您想了解flexbox，可以在這里找到一個可愛的教程： https ://flexboxfroggy.com/如果您不喜歡flexbox，那么這里有很多教程，例如： https : //scotch.io/教程/ A-視覺引導至CSS3-Flexbox的的屬性

我讓你從這里開始工作