React子组件无法接收父组件Props且无法打印传递文本问题求助

嘿，我帮你捋捋这个问题——你现在的核心问题是子组件没有正确接收父组件传递的props，而且组件内部的逻辑也有几个小偏差，咱们一步步来修正：

先看问题出在哪： #

• 子组件根本没定义接收props的参数，所以完全拿不到父组件传过来的text值
• 你在子组件顶层直接调用handleText()但没传参数，而且错误地把handleText函数传给了原生<header>标签的text属性（原生header标签根本没有这个属性哦）
• 父组件的baselineText初始值是undefined，虽然不影响最终结果，但设置个初始空字符串会更严谨

修正后的代码： #

父组件（优化初始state）：

import { useState, useEffect } from 'react'; // 别忘了导入React Hooks！
import { Header } from '../components'

export default () => {
  // 给state设置初始空字符串，避免初始渲染传undefined
  const [baselineText, setBaselineText] = useState('')

  useEffect(() => {
    setBaselineText('This the ABOUT page')
  }, [])

  return <Header text={baselineText} />
}

子组件（核心修正）：

// 子组件必须接收props，这里用解构直接取出text属性
export default ({ text }) => {
  const handleText = () => {
    console.log('父组件传递的文本：', text)
  }

  // 用useEffect监听text变化，只有当text更新时才打印
  useEffect(() => {
    if (text) { // 避免初始空字符串时打印
      handleText()
    }
  }, [text])

  // 原生header标签要显示文本，直接把text放在标签内部
  return <header>{text}</header>
}

改动说明： #

1. 子组件接收props：必须在组件函数的参数里定义props（或者解构出需要的属性），这样才能拿到父组件传过来的值。
2. 合理触发打印逻辑：不要在组件顶层直接调用handleText()，不然每次组件渲染都会执行。用useEffect监听text的变化，当文本真正更新后再打印，还能加个判断避免初始空字符串的无效打印。
3. 正确使用原生标签：原生<header>没有text属性，要展示内容就把文本放在标签的开闭标签之间。
4. 优化父组件state：给useState设置初始空字符串，让整个传值逻辑更严谨，避免子组件接收到undefined。

这样改完之后，子组件就能正常打印父组件传递的文本啦～

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