使用内联 CSS 在 React 项目中以相反的顺序显示 <li>

Question

我有一个使用消息传递的反应项目，所以我希望最近添加的消息显示在底部。我已经为 HTML5 标签尝试了 'reversed' 属性，但它似乎并没有改变我浏览器中的任何东西（最新版本的 Chrome）。我只想以倒序显示我的列表，我将如何添加它来完成我的代码？我的渲染函数如下：

   render() {  

  var styles = {
    color: "#3895C4",
    fontSize: 25,
    fontFamily: "Courier New",
    background: "#eee",
    padding: "20px",
    margin: "20px",
    listStyleType: "none",
    transition: "opacity .25s ease-in";

  }
    return (
      <div >
      <form onSubmit={this.addMessage.bind(this)}>
        <input type="text" placeholder='Message' ref={ msg => this.input = msg }/>
        <input type="submit"/>
        <li style={styles}>
          { /* Render the list of messages */
            this.state.messages.map( message => <li reversed key={message.id}>{message.text}</li> )
          }
        </li>
        </form>
        </div>
    );
  }

Answer 1

选项 1 - 反转数组

您可以reverse数组：

<ul style={styles}> // this should be a ul, and not li
  { /* Render the list of messages */
    this.state.messages.reverse().map(message => 
        <li reversed key={message.id}>{message.text}</li> 
    )
  }
</ul>

选项 2 - 反转呈现的项目

不是反转数组，你可以反转渲染的项目，通过使用 flexbox 和 flexDirection: 'column-reverse':

var styles = {
  flex: 1,
  flexDirection: 'column-reverse',
  color: "#3895C4",
  fontSize: 25,
  fontFamily: "Courier New",
  background: "#eee",
  padding: "20px",
  margin: "20px",
  listStyleType: "none",
  transition: "opacity .25s ease-in";
}

<ul style={styles}> // this should be a ul, and not li
  { /* Render the list of messages */
    this.state.messages.map((message) => 
        <li key={message.id}>{message.text}</li> 
    )
  }
</ul>

使用内联 CSS 在 React 项目中以相反的顺序显示 <li>

Display a <li> in reverse order in React project using inline CSS

html

javascript

css

reverse

reactjs