web-dev-qa-db-ja.com

react-jsでimmutable-jsの場合にPropTypesを使用する

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に割り当てる必要があることに注意してください。

javascriptreactjsimmutable.js
13
rubyu2

私はここに来て、ImmutableJSの配列またはあらゆる種類の反復可能なオブジェクトを小道具として渡すことができるソリューションを探しました。他の誰かがこれが役に立つと思う場合に備えて、これが私が思いついたものです：

PropTypes.oneOfType([
  PropTypes.instanceOf(Array),
  PropTypes.instanceOf(Immutable.Iterable)
]).isRequired
15
Mark Murphy

カスタムバリデーターを指定できます。

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>
0
Sadik