React proptypes 组件与元素

Question

有什么区别:

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" />} />

在什么情况下我应该使用另一个？

谢谢

Answer 1

我认为您应该像这样渲染按钮：

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）

React proptypes 组件与元素

React proptypes component vs element

reactjs

react-proptypes