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

Question

我有一个使用消息传递的react项目,所以我希望最近添加的消息显示在底部.我已经尝试了HTML5标签的"反转"属性,但它似乎没有改变我浏览器中的任何内容(最新版本的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 - 反转阵列

你可以反转数组:

<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 - 反转渲染的项目

您可以使用带有以下内容的弹性框来反转渲染的项目,而不是反转数组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>