React 动态渲染 HTML 标签与修改页面标题的方法

动态渲染 HTML 标签

在前端开发中，经常遇到这样的需求：子组件需要根据父组件传递来的 props 值，动态显示从 <h1> 到 <h6> 的不同级别标题。如果使用传统的模板语法（如 Vue 早期版本的 template），通常需要使用大量的 v-if 或 switch-case 语句进行分支判断，代码显得冗余且不够灵活。而在 React 中，利用 JSX 结合 JavaScript 的动态能力，可以更加优雅地解决这个问题。

第一步：定义父组件并传递参数

首先，创建一个父组件 Father.js，用于向子组件传递表示标签级别的数值（如 1 代表 h1）。

import React from 'react';
import Child from './Child.js';

class Father extends React.Component {
    render() {
        return (
            <React.Fragment>
                <Child size={1} />
            </React.Fragment>
        )
    }
}
export default Father;

第二步：在子组件中动态构建标签名

接下来，创建子组件 Child.js。关键在于将字符串拼接后的标签名赋值给一个首字母大写的变量。在 JSX 中，首字母大写的组件变量会被解析为 React 组件或 HTML 元素（对于原生 HTML 标签，如 H1, H2 等，React 会将其映射为对应的 DOM 节点）。

import React from 'react';

const Child = (props) => {
    // 根据传入的 size 动态生成标签名，例如 "h1", "h2" 等
    let MarkUp = `h${props.size}`;
    
    return (
        <React.Fragment>
            {/* 注意：这里的 MarkUp 首字母大写，且必须是合法标识符 */}
            <MarkUp>你好</MarkUp>
        </React.Fragment>
    )
}

export default Child;

这种方式的优点是不需要写死所有的标签类型，无论层级多少，都可以通过简单的字符串插值来实现动态渲染，极大提高了代码的复用性和灵活性。

全局修改页面标题 (Title)

在使用 Create React App 等脚手架搭建的项目时，浏览器标签页默认显示的标题通常为 "React App"。为了符合项目品牌或用户体验要求，我们需要全局修改这一标题，同时也可能需要替换默认的 favicon 图标。

第三步：定位并修改 index.html 文件

React 项目的入口 HTML 文件位于项目根目录下的 public 文件夹中，文件名为 index.html。

1. 打开项目终端，进入 public 目录。
2. 找到 index.html 文件并使用文本编辑器或 IDE 打开。
3. 在文件头部找到 <head> 标签区域内的 <title> 标签。
4. 将内部的文字从 "React App" 修改为你想要的名称。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
    <!-- 修改此处 -->
    <title>我的自定义项目标题</title>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  </head>
  ...
</html>

保存文件后，重启开发服务器（如果未自动热更新），刷新浏览器即可看到标题变更。若需更换网站图标，同样在该文件中找到 <link rel="icon" ...> 标签，确保路径指向你放置在 public 目录下的新图标文件即可。

以上就是 React 动态更改 HTML 标签及修改页面标题的详细内容，更多关于 React 前端配置的资料请关注本站其它相关文章！