web-dev-qa-db-ja.com

React proptypesコンポーネントvs要素

違いは何ですか :

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

どちらを使用すればよいですか?

ありがとう

14

ボタンは次のようにレンダリングする必要があると思います。

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

7
al8anp