2015-03-21 14 views
12

Jaka jest różnica pomiędzy:React proptypes składnik vs elementu

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

Chciałbym użyć;

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

W takim przypadku należy użyć drugiego?

Dzięki

Odpowiedz

6

myślę, że należy uczynić przycisk tak:

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

Wtedy można go używać z <Icon /> lub cokolwiek innego (tekst ...):

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

lub

<Button>anything</Button> 

A potem prawidłowa proptype zależy od tego, co chcesz, aby wewnątrz <Button /> (Ale nie jestem pewien React.PropTypes.component istnieje, to nie jest w dokumentacji: http://facebook.github.io/react/docs/reusable-components.html)

+1

Rzeczywiście, nie jest 'React.PropTypes.component' w dokumencie. Jest w Sublime JSX snippets, ale mogą być one nie tak. Używanie 'this.props.children' wydaje się znacznie lepszym rozwiązaniem! –

+12

Właściwie, myślę, że to było w dokumentach, ale ponieważ React 0.12 'React.PropTypes.component' został przemianowany na' React.PropTypes.element'. Z pewnością jest teraz w dokumentach. Podczas gdy generalnie używanie dzieci jest zwykle dobrym rozwiązaniem, istnieją pewne czasy, kiedy przechodzisz do nazwanych komponentów, ponieważ rekwizyty pozwalają ci robić rzeczy, których nie możesz, po prostu zagnieżdżając dzieci. Na przykład, możesz potrzebować komponować komponent strony, przekazując komponenty nagłówka i stopki jako rekwizyty, które następnie umożliwiają renderowanie strony z różnymi nagłówkami i stopkami (bez konieczności stosowania innego komponentu strony dla każdej strony). – nextgentech

Powiązane problemy