Javascript 反应模态参考未定义！Can'；不添加自定义属性

我有一个简单的模式：

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>
    );
  }

---

此处元素始终未定义，因此

setAttribute

失败；如果我去检查元件，

ref=“test”

在

位置不存在！有人能帮我解释一下为什么modal中缺少此ref吗？

尝试将代码移动到

ComponentDidMount

或

componentdiddupdate

方法。裁判不应该没有定义

您还可以使用回调来存储对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>

---

因此，打开模式的setState实际上也是在buttonClickHandler方法中调用的。。所以我不能在ComponentDidMount中移动它，所以打开模态的setState实际上也是在buttonClickHandler方法中调用的。。因此，我无法将其移动到componentDidMount内部，编辑问题以进行澄清。您可以使用

this.testNode

，其中包含对单击手柄中DOM元素的引用。我尝试了您的建议，但ref仍然未呈现：（…此外，我无法将代码放入componentDidMount中，因为模态+其子级在开始时隐藏/未打开时甚至不会呈现..我认为只有在执行setState（{isModalOpen:true}）时才会呈现它）…但问题仍然存在..ref缺失：X您是否尝试过使用

componentDidUpdate

？它似乎是模态的。当执行

someButtonClicked

时不会渲染Body。如果您使用组件创建一个JSFIDLE将非常有用。因此，当我检查元素时，我能够看到模态。Body渲染后，我甚至可以看到数据自定义属性，如果我设置了它，但没有ref…所以卡住了：X

<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>

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

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