Tengo un componente contenedor que, en algunos casos, necesito reordenar la posición de solo uno de los elementos secundarios, a veces necesito tener ComponentX en la parte superior, a veces en la parte inferior. ¿Hay alguna manera elegante de lograr esto? porque lo hice pero replicando código.
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> ) }Aquí está mi codepen
Lo que tienes está perfectamente bien, pero traté de encontrar una forma diferente de hacerlo y se me ocurrió esto. Por lo tanto, puede invertir fácilmente el orden de las teclas del componente utilizando el parámetro 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> ) }