React向子组件传递Props时子组件接收为空的问题求助

你的问题出在函数组件接收props的方式上，函数组件的第一个参数是包含所有传入属性的props对象，而非直接的单个属性值。

修正方案一：解构赋值获取目标属性 #

修改子组件代码，直接解构props对象中的miData属性：

import React from "react"
const Popup = ({ miData }) => {
   console.log(miData) // 现在会输出{title:'Hello world', text:'Lorem ipsum...'}
    return (
        // 原HTML代码保持不变
    )
}
export default Popup

修正方案二：通过props对象访问属性 #

如果不想用解构，也可以保留props参数，通过点语法获取目标属性：

import React from "react"
const Popup = (props) => {
   console.log(props.miData) // 同样能正确输出传递的数据
    return (
        // 原HTML代码保持不变
    )
}
export default Popup

你之前的写法是把整个props对象赋值给了miData变量，若主组件仅传递了miData属性，console.log(miData)应该输出{miData: {...}}而非空对象，可能是代码书写时的疏漏，但采用上述两种规范写法即可解决问题。

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