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

我有一个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>

---

但我想知道是否有更好的方法，因为我的方法使用重复代码，这就是为什么我首先要使用这个Links组件的原因。

尝试使用这一行代码：

flex-direction:row-reverse

您可以使用

上的
display:flex
和
flex-direction
属性

弹性方向：行反转
或
弹性方向：列反转
取决于您的布局

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 ? <div><text/><img/></div> :  <div><img/><text/></div>