React类组件Modal.confirm中无法及时获取更新state如何解决

Modal.confirm 属于命令式调用的API，调用时传入的content是执行瞬间生成的React Element静态快照，不会绑定外层类组件的更新上下文。外层组件执行setState触发重渲染时，已经创建的弹窗内容不会被同步重绘，自然无法获取到最新的state.A值，导致条件渲染的div节点不显示。
另外原代码存在拼写错误：配置项写的是tilte，正确属性名应为title，该错误也会导致弹窗标题无法正常展示。

方案1（推荐）：抽离独立的内容组件 #

把弹窗内的交互状态收敛到独立组件内部，状态更新由组件自身触发重渲染，完全不依赖外层组件的state：

// 弹窗内容独立组件
class ConfirmContent extends React.Component {
  state = {
    showText: false
  }

  render() {
    return (
      <>
        <input onChange={() => this.setState({ showText: true })} />
        {this.state.showText && <div>text</div>}
      </>
    )
  }
}

// 调用弹窗
Modal.confirm({
  title: "title",
  content: <ConfirmContent />
})

方案2：手动触发弹窗重绘 #

如果不想额外抽离组件，可以在state更新完成后重新执行弹窗渲染逻辑，强制刷新弹窗内容：

class YourComponent extends React.Component {
  state = {
    A: false
  }

  openConfirm = () => {
    // 封装渲染逻辑，state更新后重新调用即可刷新内容
    const renderConfirm = () => {
      Modal.confirm({
        title: "title",
        content: (
          <>
            <input onChange={() => {
              this.setState({ A: true }, () => {
                // setState回调中确认状态已更新，再重绘弹窗
                renderConfirm()
              })
            }} />
            {this.state.A && <div>text</div>}
          </>
        )
      })
    }
    renderConfirm()
  }

  render() {
    return <button onClick={this.openConfirm}>打开确认弹窗</button>
  }
}

注意：方案2重复调用Modal.confirm时，多数组件库（比如Ant Design）会自动销毁已弹出的同key弹窗、替换为新弹窗，不会出现多弹窗堆叠问题，如果需要更稳定的表现优先选择方案1。

内容的提问来源于stack exchange，提问作者Zego Tech