Question

我从ReactJS开始，并且在React中为我的游戏做一个评分系统。

我使用了一个名为Score的组件来管理它。

我在可增加increment()的状态下做了一个得分值。

问题是我想从我的App组件中使用此功能（这是一个示例，我创建了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

如罗宾（Robin）所述，只需将您的状态移至父级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

反应：在从另一个组件调用的函数中使用setState吗？

1 个答案: