Reactjs 反应类型组件与元素

以下两者之间的区别是什么：

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>
    );
  }
});

var Icon=React.createClass({
道具类型：{
名称：React.PropTypes.string
},
render:function（）{
返回(
);
}
});
var按钮=React.createClass({
道具类型：{
内容：React.PropTypes.element//这一个？
内容：React.PropTypes.component//还是这个？
},
render:function（）{
返回(
{content}
);
}
});

我想用

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

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

---

谢谢

我想你应该像这样渲染按钮：

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

var按钮=React.createClass({
render:function（）{
返回(
{this.props.children}
);
}
});

然后您可以将其与

或任何其他内容（文本…）一起使用：

或

什么都行

然后，正确的proptype取决于您希望在

---

（但我不确定

React.PropTypes.component

是否存在，它不在文档中：）

事实上，

React.PropTypes.component

不在文档中。它在崇高的JSX片段中，但它们可能是错误的。使用

this.props.children

似乎确实是一个更好的解决方案！实际上，我认为它在文档中，但是自从React 0.12

React.PropTypes.component

被重命名为React.PropTypes.element。它现在肯定在文档中。一般来说，使用子组件通常是一个很好的解决方案，但在某些情况下，将命名组件作为道具传递将允许您通过简单嵌套子组件来完成无法完成的任务。例如，您可能需要通过将页眉和页脚组件作为道具传入来组合页面组件，这样就可以使用不同的页眉和页脚呈现页面（而不需要为每个页面使用不同的页面组件）。

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

<Button>anything</Button>