javascript - 根据变量改变 React 中组件的顺序？

Question

我有一个由此映射函数渲染的 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 为 true，我想先渲染文本，然后渲染 img，如果 isRight 为 false，我想要渲染图像，然后渲染文本。现在，我知道我可以将这个东西包装在一个大的 if 语句中，如下所示:

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

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

Answer 1

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

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