React父组件传state给子组件时接收值为undefined如何解决

• Props大小写不匹配：父组件传递给子组件的属性名为小写开头的show，子组件解构props时错误使用大写开头的Show，React对props名称严格区分大小写，因此子组件无法读取到传入的状态值，拿到的结果为undefined，导致条件渲染逻辑失效。
• 隐藏拼写错误：子组件关闭弹窗的事件回调中写了e.taget，正确属性名为e.target，该错误会导致后续点击遮罩关闭弹窗的逻辑无法正常触发。

父组件逻辑无问题，仅需修正子组件的两处错误即可，修正后的子组件代码如下：

import React, { useRef } from 'react'

function Modal({ children, show, setShowModal }) {
    const modalRef = useRef()
    
    console.log(show);

    const closeModal = (e) => {
        if (e.target === modalRef.current) {
            setShowModal(false)
        }
    }
    
    return (
        show &&
        <div>Hi</div>
        // 原有完整弹窗结构放开后可正常运行
        // <>
        // <div className='Modal' ref={modalRef} onClick={closeModal}>
        //     <div className='container'>
        //         {children}
        //     </div>
        // </div>
        // </>
    )
}

export default Modal

修复后子组件可正确同步父组件状态：初始show值为false时弹窗不渲染，点击「+ New Todo」按钮触发状态更新后，子组件接收到的show值变为true，弹窗正常展示，点击遮罩关闭弹窗的逻辑也可正常生效。

内容的提问来源于stack exchange，提问作者Sangamesh Mathad