Reactでimmutable-jsとreact-immutable-proptypesを使用しています。
_// CommentBox.jsx
getInitialState() {
return {
comments: Immutable.List.of(
{author: 'Pete Hunt', text: 'Hey there!'},
{author: 'Justin Gordon', text: 'Aloha from @railsonmaui'}
)
};
},
render(){
console.log(this.state.comments.constructor);
return (
<div className='commentBox container'>
<h1>Comments</h1>
<CommentForm url={this.props.url} />
<CommentList comments={this.state.comments} />
</div>
);
}
// CommentList.jsx
propTypes: {
comments: React.PropTypes.instanceOf(Immutable.List),
},
// CommentStore.js
handleAddComment(comment) {
this.comments.Push(comment);
}
_
ページの初期化の場合、問題はありません。すべて問題ありません。警告はありません。コンソールログには、comments
がfunction List(value)
であることが示されています。新しいコメントを追加すると、うまく機能しているように見えますが、警告があります
警告:失敗したpropType:無効なprop
comments
がCommentList
に提供されました。List
のインスタンスが必要です。CommentBox
のrenderメソッドを確認してください。
コンソールログには、comments
がfunction Array()
であることが示されています。では、なぜcomments
コンストラクターがList
からArray
に変わるのでしょうか。
そして、私は http://facebook.github.io/react/docs/advanced-performance.html#immutable-js-and-flux を読みました。
メッセージストアは、次の2つのリストを使用してユーザーとメッセージを追跡できます。
_this.users = Immutable.List(); this.messages = Immutable.List();
_各ペイロードタイプを処理する関数を実装するのは非常に簡単です。たとえば、ストアが新しいメッセージを表すペイロードを検出した場合、新しいレコードを作成してメッセージリストに追加するだけです。
_this.messages = this.messages.Push(new Message({ timestamp: payload.timestamp, sender: payload.sender, text: payload.text });
_データ構造は不変であるため、Push関数の結果をthis.messagesに割り当てる必要があることに注意してください。
私はここに来て、ImmutableJSの配列またはあらゆる種類の反復可能なオブジェクトを小道具として渡すことができるソリューションを探しました。他の誰かがこれが役に立つと思う場合に備えて、これが私が思いついたものです:
PropTypes.oneOfType([
PropTypes.instanceOf(Array),
PropTypes.instanceOf(Immutable.Iterable)
]).isRequired
カスタムバリデーターを指定できます。
propName: function(props, propName, componentName) {
if (!List.isList(props[propName]) && !Array.isArray(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>