React中如何将Props值转为大写？toUpperCase无效求方案

这里有几种可行的实现方式，帮你把传入的Props转为大写显示：

方法1：在JSX中直接调用toUpperCase() #

确保正确调用方法，同时处理props.title可能为空的情况（避免报错）：

修改Navbar组件中navbar-brand的部分：

<a class="navbar-brand" href="/#">{props.title?.toUpperCase() || 'DEFAULT TITLE'}</a>

• ?.是可选链操作符，防止props.title为undefined或null时抛出错误
• || 'DEFAULT TITLE'可设置默认值，当props.title为空时显示

若确定props.title必有值，可简化为：

<a class="navbar-brand" href="/#">{props.title.toUpperCase()}</a>

方法2：在组件内部先处理变量再渲染 #

提前在组件顶部转换Props值，再在JSX中使用：

export default function Navbar(props) {
  const upperCaseTitle = props.title ? props.title.toUpperCase() : 'DEFAULT TITLE';
  const upperCaseAbout = props.about ? props.about.toUpperCase() : 'DEFAULT ABOUT';

  return (
    <>
      <div>
        <nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark" data-bs-theme="dark">
          <div class="container-fluid">
            <a class="navbar-brand" href="/#">{upperCaseTitle}</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="/#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/#">{upperCaseAbout}</a>
                </li>
              </ul>
              <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                <button class="btn btn-outline-light" type="submit">Search</button>
              </form>
            </div>
          </div>
        </nav>
      </div>
    </>
  )
}

方法3：使用CSS文本转换（最简单） #

若仅需视觉上显示大写，无需修改字符串本身，直接用CSS属性实现：

在全局App.css或Navbar组件的专属CSS文件中添加：

.navbar-brand, .nav-link {
  text-transform: uppercase;
}

这种方式无需修改JS代码，纯样式层面完成大写显示，适合仅需视觉效果的场景。

内容的提问来源于stack exchange，提问作者dev.muhammad