0

我有一个简单的模态：

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

我的唯一目标是将自定义属性（不幸的是，它不能以 data- 或 aria- 开头，因为它是由第三方定义的div）ref="test"

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

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

4

2 回答 2

0

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

为了解决这个问题，使模态的显示道具始终为真，并使整个组件动态显示/隐藏 相似的查询

于 2021-09-17T10:45:07.917 回答
0

尝试将您的代码移至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');
}
于 2016-12-23T15:24:11.867 回答