JSX元素有条件地反向排序的首选方法?

Question

我想知道是否有一种最佳实践方法来逆转某些组件的子元素的顺序，我做而不是

我的用例是一个按钮，可以有一个图标在一边或另一边。我目前的作品:

const someFlag = true
return (
<div className="parent">
{someFlag && <img src='A'></img>}
<button>{"myButton"}</button>
{!someFlag && <img src='B'></img>}
</div>
)

但是我实际的child{X}组件有点复杂，所以我有一些重复的代码，我还想防止将来我可能有两个以上的子节点的情况。

我想把这个扔进一个数组，并根据标志反转，但我只是不知道这对性能意味着什么，我很难在谷歌上找到相关的结果

Answer 1

你可以让这个元素成为一个单独的组件，然后像之前那样渲染它。React也是关于可读性的，你的代码是完全可读的:

return (
<div className="parent">
{someFlag && <MyComponent />}
<button>{"myButton"}</button>
{!someFlag && <MyComponent />}
</div>
)

Answer 2

如果您的实际代码真的那么简单，我建议您尽可能利用CSS flexbox:

<div className="parent" style={{ display: "flex", flexDirection: someFlag ? "column" : "column-reverse" }}>
<img src='A' />
<button>{"myButton"}</button>
<img src='B' />
</div>

您也可以将其提取到CSS类中:

.parent {
display: flex;
flex-direction: column;
}
.parent.reversed {
flex-direction: column-reverse;
}

<div className={`parent ${someFlag ? "" : "reversed"}`}>
<img src='A' />
<button>{"myButton"}</button>
<img src='B' />
</div>

如何工作的演示:

.parent {
display: flex;
flex-direction: column;
}
.reversed {
flex-direction: column-reverse;
}

<div class="parent">
<p>child 1</p>
<p>middle</p>
<p>child 2</p>
</div>
<hr />
<div class="parent reversed">
<p>child 1</p>
<p>middle</p>
<p>child 2</p>
</div>

Answer 3

对于大多数用例来说可能有些矫枉过正，但是您可以像这样创建一个颠倒其子元素顺序的组件:

interface OrderFlipperProps {
children: React.ReactNode;
flipped?: boolean;
}
const OrderFlipper = ({ children, flipped }: OrderFlipperProps) => (
<>{flipped ? Children.toArray(children).reverse() : children}</>
);