Question

我有一个React组件，它是通过此map函数呈现的：

<div className="links-container">
    {links.map((link, i) => (
        <Links
            key={link.text}
            icon={link.icon}
            text={link.text}
            isRight={i % 2 === 0 ? true : false}
        />
    ))}
</div>

import React, { Component } from "react";

export default class Links extends Component {
    render() {
        const { icon, text, isRight } = this.props;
        return (
            <div style={{ alignSelf: isRight ? "flex-end" : "" }}>
                <div className="link">
                    <img
                        className="link-img"
                        src={icon}
                        alt="link"
                        style={{ borderColor: isRight ? "#1689FC" : "#FD003A" }}
                    />
                    <div className="link-text">{text}</div>
                </div>
            </div>
        );
    }
}

我想做的是，如果isRight为true，我想先渲染文本，然后再渲染img，如果isRight为false，我想先渲染图像，然后再渲染文本。现在，我知道我可以将这个东西包装在一个大的if语句中，如下所示：

isRight ? <div><text/><img/></div> :  <div><img/><text/></div>

但是我想知道是否有更好的方法，因为我的方法使用了重复代码，这就是为什么我首先拥有此Links Component的原因。

Answer 1

您可以在display:flex上使用flex-direction和<div className="link">属性

flex-direction: row-reverse或flex-direction: column-reverse，具体取决于您的布局。

Answer 2

尝试使用以下单行代码：flex-direction: row-reverse

在React中根据变量更改组件的顺序？

2 个答案: