React 组件内如何声明 document 元数据？

Question

仓乃文 · Accepted Answer

React 19 支持在组件内直接渲染、<meta>、<link> 标签，React 会自动将它们提升到 document <head> 中，无需 react-helmet 等第三方库。组件内声明元数据： ```javascript function BlogPost({ title, description, author }) { return ( <article> <title>{title} - 我的博客

{title}

{description}

); } ``` SEO 相关元数据： ```javascript function ProductPage({ product }) { return ( <> {product.name} - 商城 ); } ``` 补充说明： - React 19 自动将、<meta>、<link> 提升到 <head>，无需手动操作 - 子组件的元数据会覆盖父组件的同名元数据 - Next.js App Router 已经内置了 metadata API，不需要此方式 - React 18 及以下需要使用 react-helmet 或 Next.js 的 Head 组件 - 样式表 <link rel="stylesheet"> 也会被提升，确保样式优先加载