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>
  )
}