javascript - 将方法作为 Prop 从嵌入式组件传递给父级调用

Question

我正在构建我的第一个 React 应用程序，但似乎超出了我的能力范围。不管怎样，我正在尝试采用这样的组件:

export default class Timer extends Component {

  constructor(props) {
    super(props)
    this.state = { clock: 0, time: '' }
  }

  componentDidMount() {
    this.play()
  }

  componentWillUnmount() {
    this.pause()
  }

  pause() {
    if (interval) {
      clearInterval(interval)
      interval = null
    }
  }
render() {

    return (
      <div className="react-timer" pause={this.pause.bind(this)}>
        <h3 className="seconds"> {this.state.time} {this.props.prefix}</h3>
        <br />
      </div>
    )
  }
}

Timer.propTypes = {
  options: PropTypes.object
}

并在作为其父组件的另一个组件中访问其状态和暂停函数，因为计时器嵌入在另一个组件中。

其他组件:

class Level1 extends Component {
  constructor(props) {
  super(props);

  this.state = {x: 0, y: 0};
}


render () {
     ...
      return (
      <div>
      <div ref="elem" onMouseMove={this._onMouseMove.bind(this)} id="gameBoard">
        <img id="waldo1" src={require('../images/waldo1(1).jpg')} alt="waldo"/>
      <h2> {x} , {y}</h2>
      </div>

      <button onClick={this.refs.mytimer.pause()}>Pause</button>

      <Timer ref="mytimer" options={OPTIONS}/> <-- Here Timer

      </div>
        ) // return
      } // render
    } //component

例如，我要编写一个这样的函数:

  var isWaldoFound = function (x , y ) {

    if (true) {
    Timer.pause()
    hashHistory.push({ '/result' + this.Timer.state})
    } else {
     ..Whatever.. 
    }
}

我尝试过使用 refs 和 props，但是当我记录任何内容时，它都是未定义的。当我记录计时器时，它会显示计时器，但是当我记录 Timer.pause 或 Timer.pause() 时，它会说它未定义。

我怎样才能做到这一点？

Answer 1

React 的核心是你的 UI 是你的状态的函数；也就是说，React 是关于状态的。因此，您不必强制执行操作，而是更改状态，并且组件对状态更改做出“ react ”。

您可能想阅读: https://zhenyong.github.io/react/docs/more-about-refs.html 和 https://facebook.github.io/react/docs/refs-and-the-dom.html

在您的情况下，您可以将“当前状态”作为 Prop 传递给计时器，然后在计时器中的 componentWillRecieveProps() 中，根据当前状态检查新的“当前状态”，以及是否有更改状态，然后让计时器将自身转换到新的“当前状态”，而不是尝试强制告诉计时器转换到新状态。

所以，你想做的并不是真正的“React”方式，但你仍然应该能够让它工作......

首先，我建议使用回调引用而不是字符串引用，理想情况下回调是外部组件上的类方法而不是粗箭头函数，这样每次渲染就不会生成新函数。使用 ref 在第一次渲染时捕获 Timer 实例，将该实例存储为 Level1 组件的实例变量，然后在单击暂停按钮时使用该实例。

也许是这样的(当然未经测试):

class Level1 extends Component {
  constructor(props) {
  super(props);

  this.captureTimer.bind(this)
  this.onPauseTimerButtonClicked.bind(this)

  this.state = {x: 0, y: 0};
}

captureTimer(ref) {
    this.timer = ref
}

onPauseTimerButtonClicked() {
    this.timer.pause()
}

render () {
     ...
      return (
      <div>
      <div ref="elem" onMouseMove={this._onMouseMove.bind(this)} id="gameBoard">
        <img id="waldo1" src={require('../images/waldo1(1).jpg')} alt="waldo"/>
      <h2> {x} , {y}</h2>
      </div>

      <button onClick={this.onPauseTimerButtonClicked}>Pause</button>

      <Timer ref={timer => this.captureTimer(timer)} options={OPTIONS}/> <-- Here Timer

      </div>
        ) // return
      } // render
    } //component