Javascript 当尝试与ReactDOM.findDOMNode一起使用时，this.refs不在引导模式下工作，因此为null

我在试图访问打开的模式参考时遇到问题

下面是我的包装器类

ModalWrapper

import * as React from 'react';
import MyModal from './MyModal'
import * as ReactDOM from "react-dom";

export interface IModalWrapperProps {
}

export class ModalWrapper extends React.PureComponent<IModalWrapperProps, {}> {
    constructor() {
        super();
    }

    /**
     * EDITED HERE 
    */

    handlePrint = (refObj) => {
        //Getting the ref of the MyMoal component but when I trying to log the data key it is undefined
        console.log(refObj); //successfully logs the ref object of MyModal component.
        const refVal = refObj.data;
        const node = ReactDOM.findDOMNode(refVal);
        console.log(node) // logging null still
    }

    renderDivTag = () => {
        return (
            <div>
                <h1>Hello Modal</h1>
            </div>
        )
    }

    render() {
        return (
            <MyModal id="test-modal" onPrint={this.handlePrint} showComponent={this.renderDivTag()} />
            <button onClick={() => showHelloModal('test-modal')} />
            )
    }
}

import*as React from'React'；
从“./MyModal”导入MyModal
从“react dom”导入*作为react dom；
导出接口IModalWrapperProps{
}
导出类ModalWrapper扩展React.PureComponent{
构造函数（）{
超级（）；
}
/**
*在此编辑
*/
handlePrint=（重新编辑）=>{
//获取MyMoal组件的ref，但是当我尝试记录数据键时，它是未定义的
console.log（refObj）；//成功记录MyModal组件的ref对象。
const refVal=refbj.data；
const node=ReactDOM.findDOMNode（refVal）；
console.log（node）//仍然记录null
}
RenderIvTag=（）=>{
返回(
你好，莫代尔
)
}
render（）{
返回(
showHelloModal（'test-modal'）}/>
)
}
}

MyModal组件

import * as React from 'react';
import { Modal } from 'react-bootstrap';
import { connect } from 'react-redux';

export interface IMyModalProps {
    modalID: string;
    id: string;
    showComponent: React.ComponentClass;
    onPrint: (ref) => void;
}

export class MyModalImpl extends React.PureComponent<IMyModalProps, {}> {

    constructor() {
        super();
    }
    /**
    * EDITED HERE 
    */

    refValue;

    handlePrint = () => { 
        return this.props.onPrint(this.refValue);
     }

    render() {
        if (this.props.modalID !== this.props.id) {
            return <div></div>;
        }
        return (
            <Modal className="print-preview-outer" show={true} >
                <Modal.Header closeButton>
                    <Modal.Title>Print Preview</Modal.Title>
                </Modal.Header>
                <Modal.Body className="print-preview">
                    <div 
                            /**
                            * EDITED HERE   
                            */

                        ref=((value) => this.refValue = value)
                        style={{ width: '597px', background: 'white', margin: 'auto' }}
                        id="print-preview"
                    >
                        {this.props.showComponent}
                    </div>
                </Modal.Body>
                <button onClick={this.handlePrint}>Print</button>
            </Modal >
        )
    }
}

export function mapStateToProps(state) {
    return {
        modalID: state.get('modalID')
    }
};

export const MyModal = connect<{}, {}, IMyModalProps>(mapStateToProps)(MyModalImpl)

import*as React from'React'；
从'react bootstrap'导入{Modal}；
从'react redux'导入{connect}；
导出接口IMyModalProps{
莫达利德：字符串；
id：字符串；
showComponent:React.ComponentClass；
onPrint：（ref）=>无效；
}
导出类MyModalImpl扩展了React.PureComponent{
构造函数（）{
超级（）；
}
/**
*在此编辑
*/
参考值；
handlePrint=（）=>{
返回this.props.onPrint（this.refValue）；
}
render（）{
if（this.props.modalID！==this.props.id）{
返回；
}
返回(
打印预览
this.refValue=value）
样式={{width:'597px'，背景：'white'，边距：'auto'}}
id=“打印预览”
>
{this.props.showComponent}
印刷品
)
}
}
导出函数MapStateTops（状态）{
返回{
modalID:state.get（'modalID'）
}
};
export const MyModal=connect（mapStateToProps）（MyModalImpl）

因此，当我单击按钮时，showHelloModal方法在键

modalID

上设置一个值，然后比较两个模态id，如果两者相等，则显示模态

现在我要做的是，我需要我的ModalWrapper组件中MyModal组件的DOMNode，在模态显示后打印Hello模态词

如何使用ref获取对DOM节点的引用。如果我使用的是

document.getElementById（'print-preview'）

我可以访问该模式的DOM节点，但我想改用ref

还有一件事，当我在

ModalWrapper

组件中记录

this.refs

时，我在控制台中得到一个对象，如下所示

---

任何帮助都会受到欢迎。

不要将字符串文本用作引用，而应使用回调函数。此外，refs仅在同一组件内部可见，不在跨组件中可见。我建议使用回调函数refs，如本文所述。此.refs.data在ModalWrapper中使用，并在MyModalImpl中定义。我怀疑ModalWrapper无法看到refs值，因为它是在另一个组件中定义的。我也尝试过使用回调函数，但也得到了null。我已经更新了使用回调函数的代码，但是作为节点，我仍然得到null。是的，模态是另一个组件，但是当它被显示时，如果我想错了，它应该是ModalWrapper组件Idk的子组件\