REACT: Использовать setState в функции, вызываемой из другого компонента?

Question

Я начинаю в ReactJS и создаю систему оценок для своей игры в React.

Я использовал компонент "Оценка" для управления им.

Я сделал оценку в состоянии, которое можно увеличить на increment(),

Проблема в том, что я хотел бы использовать эту функцию из моего компонента приложения (это пример, который я создал incrementScore() показать это).

Однако мой increment() не может получить доступ к this.setState() когда функция вызывается из другого компонента.

Обратите внимание, что я создал кнопку "Увеличение" внутри Score.js который использует increment() и работает отлично.

У вас есть решение или вы могли бы просто дать подсказку? Спасибо!

App.js:

import Score from './Score'

class App extends React.Component {

  incrementScore() {
    Score.prototype.increment()
  }

  render() {
    return (
        <div>
          <h1 id="title">Game</h1>
          <Score />
          <Canvas /> {/*Not important here, just for the game*/}
        </div>
    )
  }
}

export default App

Score.js:

import React from 'react'

class Score extends React.Component {

  constructor() {
    super()
    this.state = {
      score: 0
    }
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState({
      score: this.state.score + 1 //this.state.score + 1
    })
  }

  render() {
    return (
      <div>
        <p id="score">Score: {this.state.score}</p>
        <button>Incrementer</button>
      </div>
    )
  }
}

export default

Answer 1

Как уже упоминал Робин, просто перенесите свое состояние к родителю App компонент, и пусть ваш Score компонент быть компонентом без сохранения состояния. Кроме того, не забудьте передать функцию приращения вниз как опору и использовать ее в вашей кнопке как onClick функция.

class App extends React.Component {
constructor() {
    super()
    this.state = {
      score: 0
    }
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState({
      score: this.state.score + 1 //this.state.score + 1
    })
  }

  render() {
    return (
      <div>
        <h1 id="title">Game</h1>
        <Score scoreCount={this.state.score} increment={this.increment}/>
      </div>
    )
  }
}
const Score = props =>
      <div>
        <p id="score">Score: {props.scoreCount}</p>
        <button onClick={props.increment}>Incrementer</button>
      </div>

Смотрите живой пример здесь: https://codesandbox.io/s/wq4kqqz0mw