Question

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

1）＆＃34;消息＆＃34;基本上是一个带有消息道具的组件（dateTime， userName和body）;

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）＆＃34;消息＆＃34;组件，它是列出所有聊天消息的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 }) %>

没有什么太复杂的。问题是我不知道如何更改＆＃34;消息＆＃34;组件属性。例如，如果我想更改消息created_at属性的格式？或者用户根据模型方法命名？我是否必须解析这些＆＃34;道具＆＃34;与控制器的json一起？

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

如何使用react-rails访问子组件props

0 个答案: