我们可以大写或大写react中的props的值吗?

Question

我想大写我的道具值，我已经尝试了toUpperCase方法，但它不起作用

下面是我的代码:

export default function Navbar(props) {

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="/#">{props.title}</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="/#">{props.about}</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>
</>
)
}

这是一个导航条，我从bootstrap，现在我给它的标题作为道具，我希望它是大写的，但它不起作用，任何方法除了toUpperCase我试过，但不起作用

这是我分配道具的代码:

import './App.css';
import Navbar from './Components/Navbar';
import TextForm from './Components/TextForm';

function App() {
return(
<>
<Navbar  title="demo web"  about="About Us"/>

<div className="container my-5">
<TextForm/>
</div>

</>

)

}
export default App;

这是我正在使用它的组件:

export default function Navbar(props) {

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="/#">{props.title}</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="/#">{props.about}</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>
</>
)
}

Answer 1

将.toUpperCase()附加到字符串表达式

export default function Navbar(props) {

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="/#">{props.title.toUpperCase()}</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="/#">{props.about.toUpperCase()}</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>
</>
)
}