Saya menemukan di halaman dokumentasi React, bahwa teknik menggunakan React dengan cara yang benar dapat didasarkan pada prinsip tanggung jawab tunggal, yaitu komponen harus melakukan satu hal saja. Saya sudah membuat Gameboard sederhana, yang mencakup input, skor angka yang dihasilkan secara acak, dan kondisi. Semua perhitungan dan presentasi dibuat dalam komponen Gameboard. Sekarang saya ingin membagi aplikasi saya ke dalam komponen yang berbeda. Apa cara yang tepat untuk melakukannya? Salah satu cara seperti yang saya pikirkan adalah membuat komponen yang berbeda seperti: Score, Input, RandomNumber. Tapi aku cukup tersesat. Saya membuat komponen Score, di komponen itu saya menampilkan data dan memperbarui status score. Jadi bagaimana saya harus meneruskan data ini ke komponen Gameboard induk saya? Dengan fungsi panggilan balik?

Atau haruskah saya membuat variabel dalam Gameboard dari nilai score saya, semua peningkatan (fungsi dari score: this.state.score + 1 harus dilakukan di komponen Score, perbarui score di komponen Score dan kirim data yang diperbarui ke komponen Gameboard?

1
T. Jony 1 Juli 2020, 18:40

1 menjawab

Jawaban Terbaik

Berikut adalah contoh yang sangat sederhana di mana status skor disimpan di Papan Permainan, tetapi akan ditampilkan dan mungkin ditambahkan oleh Papan Skor

class Gameboard extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      score: 1
    }
  }
  
  add() {
    const newScore = this.state.score + 1;
    this.setState({score:newScore});
  }
  
  render() {
    return (
        <div>
          <Scoreboard score={this.state.score} onAdd={this.add.bind(this)}/>
        </div>
    )
  }
}

class Scoreboard extends React.Component {
  render() {
    return (
      <header>
        <h1>{this.props.score}</h1>
        <button onClick={this.props.onAdd}>add</button>
      </header>
    )
  }
}

ReactDOM.render(<Gameboard />, mountNode);

Anda dapat memasukkan kode tersebut ke situs ini untuk melihatnya berfungsi.

1
TKoL 1 Juli 2020, 15:56