React组件调起手机号验证对话框

还是工程上的问题吧，手上有个组件需要在打开某项功能是判断当前用户是否经过手机号验证，逻辑交互如下：

整个逻辑还是比较清晰的

由于验证对话框是另外一个React组件，需要在当前组件里添加该验证对话框的打开状态，另外由于需要在验证通过或未通过后分别采取不一样的策略，需要对应不同的回调

// 开启功能
class SetFeature extends Component {
  constructor (props) {
    super(props)
    this.setState = {
	  verifyDialogOpen: false,
      verifyResolve: null,
      verifyReject: null
    }
  }
  
  setFeature (callback) {
    const verifyHandle = new Promise((resolve, reject) => {
      return this.callVerifyDialog(resolve, reject)
    })
    
    verifyHandle().then(
      () => {
        if (isSuccess) {
          updateFeature(mode)
          typeof callback === 'function' && callback(null)
        } else {
          // true 表示开启功能失败
          typeof callback === 'function' && callback(true)
        }
        // 验证成功后关闭验证对话框
        if (this.state.VerifyDialogOpen) {
          this.setState({VerifyDialogOpen: false})
        }
        
      }
    )
  }
  
  callVerifyDialog (resolve, reject) {
    if(!isVerified) {
      this.setState({
        verifyDialogOpen: true,
        verifyResolve: resolve,
        verifyReject: reject
      })
    } else {
      resolve()
    }
  }
  // 此处传入父组件的resolve与reject
  renderVerifyDialog () {
    const { mobileVerifyResolve, mobileVerifyReject, mobileVerifyOpen } = this.state

    return <VerifyDialog
      handleResolve={verifyResolve}
      handleReject={verifyReject}
      open={verifyOpen}
    />
  }
  render () {
    <div>
      <div onClick={this.setFeature}>开启功能</div>
      {this.verifyDialog()}
    </div>
  }
}


// 在验证对话框组件里接收父组件的resolve与reject
class verifyDialog () {
   
  verify () {
    if (passVerify) {
      this.props.resolve()
    } else {
      this.props.reject()
    }
  }
}

整个结构的核心在于给验证组件传递显示状态和成功／失败后的回调，并且验证成功后需要记录下来，下次直接跳过该验证。