Bir bileşen içine kesinlikle veri girilmesini isterseniz propTypes bölümüne children adında bir özellik tanımlayıp kesinlikle kullanılmasını isteyebilirsiniz. Bu sayede kod geliştiren bu etiket bölümü içine gerekli çıktıyı üretmezse proje yine COnsole bölümünde bir hata üretir.
Basit bir örnek ile durumu açıklayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
class App06 extends Component { render() { return ( <div style={{ backgroundColor: this.props.renk ? 'red' : 'white', fontSize: this.props.boyut + 'px' }}>Merhaba2, {this.props.ad} {this.props.soyad} <div className="test">{this.props.children}</div> </div> ); } } App06.propTypes = { ad: propTypes.string.isRequired, soyad: propTypes.string, renk: propTypes.bool, fontSize: propTypes.number, children: propTypes.node.isRequired }; class App07 extends Component { render() { return ( <App06 ad= "Erdinç" soyad= "Uzun" renk={true} fontSize={30}> <p>Deneme</p> </App06> ); } } export {App01, App02, App03, App04, App05, App06, App07} export default App07; |
App06 bileşeni içine “this.props.children” yazarak kullanılması gerektiği belirttik. Ardından propTypes bölümüne bu children özelliğinin bir node (bir düğüm, bir HTML elementi gibi düşünülebilir) olduğunu ve isRequired ile de gerekli olduğunu belirttik. App07’den App06 bileşenini çağırdık, değerleri gönderdik ve bir “p” etiketi oluşturduk. CTRL+S dediğinizde kodunuz çalışır ama “p” etiketini silerseniz yine Console ekranında bir hata ile karşılaşırız.