0

私はこのトークを見てきましたが、現在、react コンポーネントを使用して (チャットで) メッセージのリストを表示しようとしています。したがって、2つの反応コンポーネントがあります。

1) 基本的にメッセージの小道具 (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) すべてのチャット メッセージをリストする 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