在react js中使用不可变js时使用PropTypes

Question

我在React中使用了不可变的js和react-im身不由己的角色类型。

// 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);
}

当页面初始化时，没有问题，一切正常，没有警告。控制台日志显示注释是功能列表（值）。当我添加一条新评论时，它看起来效果不错，但有一个警告

警告：失败的propType:提供给CommentList的prop注释无效，应为列表的实例。检查CommentBox的渲染方法。

控制台日志显示注释是函数数组（）。那么，为什么注释构造函数从列表更改为数组？

我读过http://facebook.github.io/react/docs/advanced-performance.html#immutable-js-and-flux.

消息存储可以使用两个列表跟踪用户和消息：

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函数的结果分配给它。信息。




Answer 1

您可以指定自定义验证器。

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>

Answer 2

我来这里是想找到一个解决方案，让来自ImmutableJS的数组或任何类型的iterable对象作为道具传递。如果其他人觉得这很有用，下面是我的想法：

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