React组件Props传入元素顺序错乱，为何按钮顺序颠倒？

• Modal组件Footer默认反向布局
  多数UI组件库的Modal Footer区域会默认使用flex-direction: row-reverse的CSS布局，目的是让主操作按钮（比如删除、确认）处于右侧，符合常规交互习惯。如果你直接将传入的footer内容原封不动渲染到这个区域，就会被反向布局影响，导致按钮顺序颠倒。
  解决方式：要么在ConfirmationModal的Footer容器里覆盖样式，将flex-direction设为row；要么调整传入footer的顺序，按组件库预期的顺序（Delete在前、Cancel在后）传递。

• ConfirmationModal内部对footer做了反转处理
  检查你自己实现的ConfirmationModal代码，有没有在渲染footer时做了顺序反转操作——比如用React.Children.toArray(footer).reverse()转换子元素，或者在JSX中手动调换了内容顺序。这类操作会直接导致传入的按钮顺序被反转。
  解决方式：删除任何主动反转footer内容的代码，确保传入的footer元素按原顺序渲染。

• CSS的order属性干扰
  如果你的按钮单独设置了orderCSS属性，或者组件库的按钮组件默认带有order值，也可能打乱显示顺序。比如Cancel按钮的order被设为2，Delete按钮的order设为1，就会出现Delete在前的情况。
  解决方式：检查按钮的样式规则，移除或调整order属性，让按钮按照DOM结构的顺序显示。

内容的提问来源于stack exchange，提问作者Leff