React proptypes组件与元素

时间:2015-03-21 18:30:13

标签: reactjs react-proptypes

有什么区别:

var Icon = React.createClass({
  propTypes: {
    name: React.PropTypes.string
  },
  render: function(){
    return (
      <span className={'glyphicon glyphicon-'+this.props.name}></span>
    );
  }
});

var Button = React.createClass({
  propTypes: {
    content: React.PropTypes.element // This one?
    content: React.PropTypes.component // Or this one?
  },
  render: function() {
    return (
       <button>{content}</button>
    );
  }
});

我想使用;

<Button content={<Icon name="heart" />} />

在哪种情况下我应该使用另一个?

由于

1 个答案:

答案 0 :(得分:7)

我认为你应该像这样呈现Button:

var Button = React.createClass({
  render: function() {
    return (
       <button>{this.props.children}</button>
    );
  }
});

然后您可以将其与<Icon />或其他任何内容(文本...)一起使用:

<Button><Icon name="heart" /></Button>

<Button>anything</Button>

然后正确的proptype取决于你<Button />中允许的内容 (但我不确定React.PropTypes.component是否存在,它不在文档中:http://facebook.github.io/react/docs/reusable-components.html