Question

我正在尝试使用react引用将数据呈现到iframe中，但是我正在获得

reference。当前值为空。

我还检查了componentDidMount()中的值，但它仍然为我提供了空值。当我在构造函数中设置引用值时。 参考设置为由“ iframe”组件插入的“ PreviewEmailModal”组件。

这就是为什么我将当前值设置为null。因此，有些人可以帮助我将 iframe组件设置为参考。

React version- 16.4.2
React DOM version - 16.4.2

import React from "react";
import PropTypes from 'prop-types'

import { Button, Modal } from "react-bootstrap";

class PreviewEmailModal extends React.Component {

    constructor() {
        super();
this.textInput = React.createRef();
        this.state = {
            desktopPreview: true
        };
    }
    render() {
        this.props;
        debugger
        return (
            <Modal
                show={true} onHide={() => {
                    this.props.closeModal();
                }}
                className="preview-email-modal"
                bsSize="lg">
                <Modal.Header closeButton>
                    <Modal.Title>Preview</Modal.Title>
                </Modal.Header>
                <Modal.Body >
                    <div className="preview-icons">
                        <span className={this.state.desktopPreview ? "active-preview-icon margin-5" : ""}>
                            <i className="glyphicon glyphicon-blackboard" onClick={() => {
                                this.togglePreview();
                            }} />
                        </span>
                        <span className={this.state.desktopPreview ? "" : "active-preview-icon margin-5"}>
                            <i className="glyphicon glyphicon-phone" onClick={() => {
                                this.togglePreview();
                            }} />
                        </span>
                    </div>
                    <div>
                        <div className="text-center">
                            <iframe
                                title={"previewFrame"}
                                style={this.state.desktopPreview ?
                                    { width: "600px", height: "450px" } :
                                    { width: "320px", height: "450px" }}
                                id="previewIframe"
                                ref={(input) => {
                                    this.textInput = input;
                                }}
                            />
                        </div>
                    </div>

                </Modal.Body>
            </Modal>
        );
    }

    componentDidUpdate() {
        debugger
    }

    componentDidMount() {
        const { current } = this.textInput;
         //Here I get current value as null every time
         const { data } = this.props;

         if (current !== null) {
             const doc = current.contentDocument;
            doc.open();
            doc.write(data);
            doc.close();
         }
    }

    focusTextInput() {
        // Explicitly focus the text input using the raw DOM API
        this.textInput.focus();
    }

    togglePreview() {
        this.setState({ desktopPreview: !this.state.desktopPreview });
    }
}

PreviewEmailModal.propTypes = {
    closeModal: PropTypes.func,
    data: PropTypes.string
};

export default PreviewEmailModal;

Answer 1

您没有正确使用Ref。而不是将回调传递给ref字段传递实例。

或通过

ref={this.textInput}

代替

ref={(input) => {this.textInput = input;}}

Answer 2

当this.textInput不在DOM上时，您可能会尝试引用它。

我通过添加componentDidUpdate这样解决了这个问题：

componentDidUpdate() {
  const { visible, emailHtml } = this.props;

  if (visible) {
    // this.iframe is my iframe ref
    this.iframe.contentWindow.document.write(emailHtml);
  }
}

另一方面，我认为您不需要此行即可进行裁判工作

this.textInput = React.createRef();

我遇到了完全相同的问题（从字面上看，我的组件也称为PreviewEmailModal）。我什至在PreviewEmailModal中也使用了非常相似的Modal组件。小世界！

Answer 3

由于我不知道您的所有代码，因此建议将您的代码从componentDidMount移至ref回调。请在此处（componentDidMount called BEFORE ref callback）检查Dan Abramov的答案

ref.current在反应中为空

3 个答案: