Parent ja child

Komponentide stuktuur, kus on nn vanemad ja järglased. Jätkan eelmise näite atendust lisdades uue alamkomponendi Heading:

import React, {Component} from 'react';

 let nimi='Juku';
export default class App extends Component {
  constructor() {
    super();
    this.state={
      loendur:0
    }
  }
   klikiSyndmus() {
     this.setState({loendur: this.state.loendur +1});
   }
  render () { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
      <header onClick={this.klikiSyndmus.bind(this)}>
        {nimi}, oled vajutanud {this.state.loendur} korda!
        <Heading /> //alamkomponendi väljakutsumine
      </header>
    );
  }
}
class Heading extends Component { //alamkomponent - kasutatakse Appis
  render() { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
      <h1>0</h1>
    )
  }
}

Oluline: andmeid saab edastada ülemkomponendilt (parent) alamkomponendile (child), vastupidiselt see ei toimi.

Järgnev demonstreeribki andmete edastamist parentilt childile:

import React, {Component} from 'react';

 let nimi='Juku';
export default class App extends Component {
  constructor() {
    super();
    this.state={
      loendur:0
    }
  }
   klikiSyndmus() {
     this.setState({loendur: this.state.loendur +1});
   }
  render () { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
      <header onClick={this.klikiSyndmus.bind(this)}>
        <Heading loendur ={this.state.loendur} />
      </header>
    );
  }
}

//alamkomponent
class Heading extends Component {
  render() { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
      <h1>  {nimi}, oled vajutanud {this.props.loendur} korda!</h1>
    )
  }
}

Muutuja loendur, mis sisaldab state'i, saadetakse alamkomponendile props-na.