如何渲染在单击列表顶部而不是底部的按钮时渲染的组件？答案

【问题标题】：How can I render component that gets rendered when clicking a button to the top of the list instead of the bottom?如何渲染在单击列表顶部而不是底部的按钮时渲染的组件？
【发布时间】：2021-05-18 16:17:21
【问题描述】：

我有一个问题。我在我的类组件中实现了这些代码 sn-ps，虽然它大部分都在工作，但我需要在列表顶部实际显示最近渲染的组件，而不是附加到列表底部。我怎样才能轻松做到这一点？

代码sn-ps：

state = {
    formCount: 0
   }
   
   //click event for button
   onAddClicked = () => { 
       this.setState({formCount: this.state.formCount + 1});
   }

    //render components based on count 
   { [...Array(this.state.formCount)].map((_, i) => <Form key={i}/>)}

所以我的表单计数处于状态，并且在单击按钮时，它将增加计数，然后根据计数，每当我单击按钮时它都会呈现相同的组件。但是，现在它正在将新组件添加到底部而不是顶部，如何渲染在单击列表顶部的按钮时渲染的新组件？

【问题讨论】：

基于数据结构来渲染组件不是更简单吗？然后就很简单了，例如在数组.unshift({...})的开头添加一个或多个元素。
我不确定我是否遵循，您能否通过向数组添加元素来详细说明您的意思。你的意思是组件还是？
使用array，而不是将表单的数量表示为数字，因为它在页面上以相同的方式表示，所以更容易......您不会在脑海中松散映射，接受的解决方案只需将数字转换为这个结构。

标签： javascript reactjs

【解决方案1】：

您可以将.reverse() 与.keys() 一起使用：

[...Array(this.state.formCount).keys()].reverse().map((i) => <Form key={i}/>)

【讨论】：

@Euridice01 改变渲染的对象是什么意思？它不会改变现有的Form:codesandbox.io/s/…
实际上，变异问题是我的遗憾。在想到之前它不起作用，但不知道为什么，这可能是我的错。谢谢！它现在正在工作：D 非常感谢！

【解决方案2】：

所以你想以相反的顺序呈现组件？最新的“最近”在顶部？一个简单的方法是 .reverse() 组件数组

【讨论】：

反向不起作用。最新的项目仍在底部添加