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

Как я могу заставить/подтвердить, что каждый элемент, переданный в массиве (в компонент 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>

reactjs arrays react-proptypes prop
person Faisal Mq    schedule 27.09.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как показано в этой хорошей статье о 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);
    }));
  }
});
person Davin Tryon    schedule 27.09.2015