小编Ano*_*non的帖子

我有一个使用消息传递的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>
    );
  }