Javascript React ref返回null和info“；下面的值刚刚评估过；

我正在尝试获取旋转木马的ref，但在componentDidMount中，this.Carousel总是返回null，其中包含“刚才对下面的值进行了计算”的信息。所以，我不知道在什么时候可以计算这个值，以及如何使电流的值不为空

我已经阅读了关于这个问题的答案，但不幸的是，这些答案没有帮助我理解我做错了什么（或者示例对我不起作用）

导出默认类ImagePreviewCarousel扩展React.Component{
carousel=React.createRef（）；
componentDidMount（）{
console.log（this.carousel）；
console.log（this.carousel.current）；
}
render（）{
const{url，imgList}=this.props；
const orderLayout=document.getElementById（'order-layout'）；
const applicationLayout=document.getElementById（'application'）；
返回(
createPortal（，orderLayout | | applicationLayout）
)
}
}
const ImageViewer=（道具：任意）=>{
控制台日志（props.onRef）；
返回(
{props.imgList}
);
}

---

p.S react版本为16.4.1

ImageViewer可以用

forwardRef

包装，请检查详细信息

---

希望它能帮助您：）

ImageViewer可以被

forwardRef

包装，请检查详细信息

希望它能帮助您：）

可能的重复

export default class ImagePreviewCarousel extends React.Component<any, any> {

    carousel = React.createRef();

    componentDidMount() {
        console.log(this.carousel);
        console.log(this.carousel.current);
    }

    render() {
        const { url, imgList } = this.props;
        const orderLayout = document.getElementById('order-layout');
        const applicationLayout = document.getElementById('application');

        return (
            createPortal(<ImageViewer url={url} onRef={this.carousel} onClose={this.props.onClose} imgList={imgList} />, orderLayout || applicationLayout)
        )
    }
}

const ImageViewer = (props: any) => {
    console.log(props.onRef);
    return (
        <Modal 
            footer={null} 
            visible={props.onClose} 
            onCancel={props.onClose}
            bodyStyle={{ backgroundColor: '#000' }}
            width={'800px'}
        >
            <div style={{
                display: 'flex', 
                flexDirection: 'column', 
                justifyContent: 'center', 
                marginTop: 'auto', 
                marginBottom: 'auto', 
                width: '100%',
                height: '100%', 
                zIndex: 10
            }}>
                <Carousel ref={props.onRef}>
                    {props.imgList}
                </Carousel>
            </div>
        </Modal>
    );
}