React PropTypes. Принудительное создание массива определенного типа React Type

Question

Как я могу заставить/подтвердить, что каждый элемент переданного в Array prop (для компонента React) имеет конкретный тип React?

Ниже приведен пример кода для этого:

<div id="container"></div> 

<script type="text/jsx"> 
    var MyButton = React.createClass({ 
     render: function() { 
      return (<input type="button" value={this.props.text} />); 
     } 
    }); 

    var MyButton2 = React.createClass({ 
     render: function() { 
      return (<input type="button" value={this.props.text} />); 
     } 
    }); 

var MyComp = React.createClass({ 
    propTypes: { 
     //buttons: React.PropTypes.arrayOf(MyButton) //Something like this 
    }, 
    render: function() { 
     return (<div><div>{this.props.title}</div> 
      {this.props.buttons} 
      </div> 
     ); 
    } 
}); 

var buttons = [React.createElement(MyButton, {key:"3", text: "Save"})]; 
buttons.push(React.createElement(MyButton, {key: "1",text: "Cancel"})); 
buttons.push(React.createElement(MyButton2, {key: "2",text: "Search"})); // And don't allow this one 

React.render(<MyComp title="My Window" buttons={buttons} />, document.getElementById('container')); 
</script> 

Answer 1

Как показано в this good article о propTypes, вы можете написать свою собственную функцию расширения, которая может быть передана в React.PropTypes.arrayOf.

Это пример, показанный в посте, указанным выше для электронной почты:

var emailPropType = function (props, propName, component) { 
    if (!isEmail(props[propName])) { 
    return new Error('Invalid email!'); 
    } 
}; 

Может использоваться как это:

var EmailList = React.createClass({ 
    propTypes: { 
    emails: React.PropTypes.arrayOf(emailPropType).isRequired 
    }, 
    render: function() { 
    return React.DOM.ul(null, this.props.emails.map(function (email) { 
     return React.DOM.li({ key: email }, email); 
    })); 
    } 
});