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

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

谢谢

- Augustin Riedinger

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)

- al8anp

---

实际上，React.PropTypes.component 并没有在文档中提到。它在 Sublime JSX 代码片段中出现过，但可能是错误的。使用 this.props.children 确实是一个更好的解决方案！ - Augustin Riedinger

实际上，我认为这在文档中有提到过，但自从React 0.12以后，React.PropTypes.component就被改名为React.PropTypes.element。现在它在文档中肯定会有说明。通常使用子组件是一个不错的解决方案，但有时将命名组件作为props传递可以让你做一些通过简单的嵌套子组件无法实现的事情。例如，你可能需要通过将页头和页脚组件作为props传入来组合一个页面组件，这样可以允许你以不同的页头和页脚呈现页面（而无需为每个页面创建不同的页面组件）。 - nextgentech