私はこのトークを見てきましたが、現在、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 アプリでどのように機能するかを理解しようとしています。提案や情報を遠慮なく残してください。前もって感謝します