反应模态参考未定义！无法添加自定义属性答案

【问题标题】：React Modal ref Undefined! Can't Add Custom Attribute反应模态参考未定义！无法添加自定义属性
【发布时间】：2016-12-23 15:04:59
【问题描述】：

我有一个简单的模态：

renderModalForm() {
    return (
      <Modal
        closeTimeoutMS={150}
        show={this.state.isModalOpen}
        onHide={this.isModalOpen.bind(this)}
      >
        <Modal.Body>
          <div className="close-button-modal">
            <i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}></i>
            <div className="clearfix"></div>
          </div>
          <div ref="test" className="testclassname">
          </div>
        </Modal.Body>
      </Modal>
    );
  }

我的唯一目标是向ref="test" 引用的div 注入一个自定义属性（很遗憾，它不能以 data- 或 aria- 开头，因为它是由第三方定义的）

当我尝试注入自定义属性时：

someButtonClicked() {
    setTimeout(() => {
      this.setState({
        isModalOpen: true
      })
    }, 100);
    var element = ReactDOM.findDOMNode(this.refs.test);
    element.setAttribute('doku-div', 'form-payment');
}

这里的元素总是未定义的，所以setAttribute失败了；如果我去检查元素，ref="test" 不存在 <div> ！有人可以帮我解释一下为什么模态中缺少这个 ref 吗？

【问题讨论】：

所以打开模式的 setState 实际上也是在 buttonClickHandler 方法中调用的。所以我不能在 componentDidMount 中移动它

标签： javascript reactjs modal-dialog react-bootstrap react-dom

【解决方案1】：

尝试将您的代码移至ComponentDidMount 或ComponentDidUpdate 方法。 Refs 不应在那里未定义。

您还可以使用回调来存储对 DOM 节点的引用：

<Modal.Body>
          <div className="close-button-modal">
            <i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}></i>
            <div className="clearfix"></div>
          </div>
          <div ref="{(testNode) => { this.testNode = testNode; }}" className="testclassname">
          </div>
</Modal.Body>

然后使用该引用而不是使用 ReactDOM：

someButtonClicked() {
    setTimeout(() => {
        this.setState({
          isModalOpen: true
        })
    }, 100);

    var element = this.testNode;
    this.testNode.setAttribute('doku-div', 'form-payment');
}

【讨论】：

所以打开模式的 setState 实际上也是在 buttonClickHandler 方法中调用的。所以我不能在 componentDidMount 中移动它，编辑问题以便澄清
您可以使用this.testNode，其中包含对点击处理程序中的 DOM 元素的引用
我尝试了你的建议，但 ref 仍然没有呈现 :(... 另外，我不能将代码放在 componentDidMount 中，因为 Modal + 它的子元素在隐藏时甚至没有呈现 /一开始没有打开..我认为它仅在我执行 setState({isModalOpen: true}) 时才呈现...但问题仍然存在.. ref 丢失：X
您是否尝试过使用componentDidUpdate？执行 someButtonClicked 时似乎未呈现 Modal.Body。如果你用你的组件创建一个 jsfiddle 会很有用。
所以当我检查元素时，我能够看到呈现的 Modal.Body，如果我设置它，我什至可以看到 data-custom-attribute，但没有参考......所以卡住了：X

【解决方案2】：

useRef 钩子在模态中不起作用，因为组件会挂载，但 jsx 不会渲染，直到你将 show prop 设置为 true。 useRef 本质上是异步的，这就是为什么在声明时它将 current 设置为 null 但在将其分配给任何元素 ref 之后得到它的值。但在模态的情况下，情况就不同了。这里的元素不是立即注册的，而是在 modal show prop 设置为 true 后注册的

为了解决这个问题，让 modal 的 show prop 始终为 true 并使整个组件动态显示/隐藏 similar query

【讨论】：