根据反应中对象的索引呈现不同的html答案

【问题标题】：Render different html depending on index of object in react根据反应中对象的索引呈现不同的html
【发布时间】：2018-09-21 22:49:07
【问题描述】：

在我的流星项目中，我有一个名为拍卖的收藏。使用反应，我希望呈现此拍卖的 3 列，行数不受限制。为此，我认为可以发送对象的索引，但我不知道该怎么做。另一个问题是它显示了 html 代码错误，因为我没有关闭“div”标签。

这是我的 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>
                    }

                }
            }

【问题讨论】：

拍卖组件不需要知道它的索引。您可以将拍卖列表拆分为父级中的 3 个单独列表，并相应地呈现它们。
你的意思是在 App 类的渲染函数中？？ @trixn
返回后为什么要写
？

关闭最后一个

@Rahamin

标签： javascript html reactjs meteor collections

【解决方案1】：

任何时候你从渲染函数返回 HTML，它需要是自包含的并且有平衡的标签。这就是 React 的工作方式，也是它给你一个错误的原因。

您可以考虑使用 flexbox，而不是尝试一次将 3 个拍卖分组。使用 flexbox，您只需渲染所有拍卖，它会自动为您处理包装。屏幕较宽的用户会看到超过 3 列，而移动设备用户在纵向模式下可能会看到一列。

如果你想了解 flexbox，这里有一个可爱的教程：https://flexboxfroggy.com/如果你不喜欢那个，周围有很多教程，比如：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

我会让你从这里开始工作

【讨论】：