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

【问题标题】：Changing the order of Components in React depending on a variable?根据变量更改 React 中组件的顺序？
【发布时间】：2019-12-20 11:04:19
【问题描述】：

我有一个由这个 map 函数渲染的 React 组件：

<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 为真，我想先渲染文本，然后是img，如果isRight 为假，我想渲染图像，然后是文本。现在，我知道我可以将这个东西包装在一个像这样的大 if 语句中：

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

但我想知道是否有更好的方法来做到这一点，因为我的方法使用重复代码，这就是我首先拥有这个链接组件的原因。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试使用这行代码：flex-direction: row-reverse

【讨论】：