React函数组件接收参数后无法渲染文本问题求助

核心问题是你对React函数组件的参数理解有误——React函数组件的第一个参数是完整的props对象，不是单个属性值。你直接把text作为参数，实际上拿到的是整个props对象，而不是你传入的text属性，所以渲染时自然看不到内容。

给你两种修复方案：

方案1：解构props直接获取text #

export default function Paragraph({ text }) {
  return (
    <div>
      {text}
    </div>
  )
}

方案2：从props对象中提取text #

export default function Paragraph(props) {
  return (
    <div>
      {props.text}
    </div>
  )
}

你的调用写法<Paragraph text="Some text"></Paragraph>是没问题的，修复组件后就能正常渲染文本了。

另外，如果要处理未传入text的场景，可以给参数加默认值避免报错：

export default function Paragraph({ text = '' }) {
  return (
    <div>
      {text}
    </div>
  )
}

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