React：重新排序子组件

Question

我有包装器组件，在某些情况下，我需要重新排序其中只有一个孩子的 position，有时我需要将 ComponentX 放在顶部，有时在底部。 有什么优雅的方法可以实现这一目标吗？ 因为我做到了，但复制了代码。

const ComponentX = () => <h4>component x</h4>
const Component1 = () => <h4>component 1</h4>
const Component2 = () => <h4>component 2</h4>

const ComponentWrapper = ({xOnTop = false}) => {
  return (
    <div className="box">
       <h1>My components</h1>
        {xOnTop && <ComponentX />}
        <Component1 />
        <Component2 />
        {!xOnTop && <ComponentX />}
    </div>
  )
}

这是我的代码笔

Answer 1

你所拥有的一切都很好，但我试图想出一种与 go 不同的方法并想出了这个。 因此，您可以使用 xOnTop 参数轻松地反转组件键的顺序。

const components = [
  <h4 key="1">component x</h4>,
  <h4 key="2">component 1</h4>,
  <h4 key="2">component 2</h4>
 ]

const ComponentWrapper = ({xOnTop = true}) => {
  components.sort((a, b) => xOnTop ? a.key - b.key : b.key - a.key)
  return (
    <div className="box">
      <h1>My components</h1>
      {components.map(c => c)}
    </div>
  )
}