0

我看过这个演讲，我现在正在尝试使用反应组件来显示消息列表（在聊天中）。所以我有两个反应组件：

1）“消息”组件，基本上是一个带有消息道具（日期时间、用户名和正文）的li；

var Message = React.createClass({
  render: function () {
    return (
        <li className="right clearfix">
          <span className="chat-img pull-right">
          <div className="chat-body clearfix">
            <div className="header">
              <small className=" text-muted"> sent {this.props.dateTime}
              </small>
              <strong className="primary-font">{this.props.userName</strong>
             </div>
             <p>{this.props.body}</p>
          </div>
        </li>
    );
  }

});

2）“消息”组件，它是一个列出所有聊天消息的 ul

var Messages = React.createClass({
    render() {
      var createMessage = ({dateTime, userName, body, id}) => <Message key={id} dateTime={dateTime} userName={userName} body={body} />;
      return <ul className="chat">{this.props.messages.map(createMessage)}</ul>;
    }
});

在我看来，这就是我所拥有的：

<%= react_component('Messages', { messages: @messages }) %>

没什么太复杂的。问题是我不知道如何更改“消息”组件属性。例如，如果我想更改消息 created_at 属性的格式？还是基于模型方法的用户名？我是否必须使用控制器中的 json 解析这些“道具”？

我只是想弄清楚 react 如何与我的 rails 应用程序一起工作，请不要犹豫，留下任何建议/信息。提前致谢

4

0 回答 0