ref.current является ноль в реакции

Question

Я пытаюсь использовать реактивную ссылку для рендеринга данных в iframe, но получаю

reference.current значение null.

Я также проверяю значение в componentDidMount() все же это дает мне нулевое значение.Как я устанавливаю значение refrence в конструкторе. Ссылка установлена ​​на компонент «PreviewEmailModal», вставленный в компонент «iframe».

Вот почему я получаю текущее значение как нулевое.Поэтому некоторые могут помочь мне установить ссылку на компонент 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 поле pass экземпляр.

ИЛИ пропуск

ref={this.textInput}

вместо

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