模态内容未显示在React Modal中

Question

在我的react应用程序中，我创建了一个模式。

//组件

import React, { Component } from 'react';

class Modal extends Component {
    shouldComponentUpdate (nextProps) {
        return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
    }

    render () { 
        return (
         <div>
            <div
               className='modal'
               style={{
                  transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                  opacity: this.props.show ? '1' : '0'
               }}>
               {this.props.children}
            </div>
         </div>
        )
    }
}

export default Modal;

当我在这样的主屏幕中调用它时，内容不会显示。

//主屏幕

<Modal show={true} modalClosed={() => alert('Modal Close') }>
   <h1>Testing Modal</h1>  
</Modal>

为什么这不起作用？ h1标签内容不在此处显示。