Javascript 如何在上一个项目的顶部显示新添加的项目？

如何在上一个项目的顶部显示新添加的项目

<div className="App">
      <h2>{this.state.title}</h2>
      <form ref="myForm" className="myForm">
        <input type="text" ref="input" placeholder="your name" className="formField" />
        <button onClick={(e)=>this.fSubmit(e)} className="myButton">submit </button>
      </form>
      <pre>
      {datas.map((data, i) =>
          <li reverse key={i} className="myList">
            {data.input}
            <button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
            <button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
          </li>
      )}
    </pre>
    </div>

{this.state.title}
this.fSubmit（e）}className=“myButton”>提交
{datas.map（（数据，i）=>

{data.input}
this.fRemove（i）}className=“myListButton”>删除
this.fEdit（i）}className=“myListButton”>编辑

)}

只需更改此代码

---

注意：reverse属性仅适用于Ordered list ol标记，而Edge早期版本79不支持ol标记的reversed属性。您正在尝试通过DOM操作（而不是页面刷新）执行此操作？您好，最好按照您希望显示数据的顺序存储数据。你能发布你的全部组件代码吗？片段。在你的预期结果应该是什么方面，也要尽可能的清晰和具体。在顶部，您的意思是在前面的列表条目之上吗？如果您包括方法items.slice（0.reverse（）.map怎么办？

 <pre>
      {datas.map((data, i) =>
          <li reverse key={i} className="myList">
            {data.input}
            <button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
            <button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
          </li>
      )}
    </pre>

 <pre className="reverse-list">
      {datas.map((data, i) =>
          <li key={i} className="myList">
            {data.input}
            <button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
            <button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
          </li>
      )}
    </pre>

.reverse-list{
  display:flex;
  flex-direction: column-reverse;
}