我正在尝试为React JS Web应用程序提供默认标题，但它没有采用默认值。 以下是app.js，我在添加默认道具之前给出标题的价值，而且工作正常。添加默认道具后，它没有在浏览器中的屏幕上更新。仅显示标题的空白。 app.js：

Question

import PropTypes from 'prop-types';
import React from 'react';

export default function Header(props) {
  return (
    <div>
      <nav className="navbar navbar-expand-lg bg-body-tertiary">
  <div className="container-fluid">
    <a className="navbar-brand" href="#">{props.title}</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
        <li className="nav-item">
          <a className="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">About</a>
        </li>
      </ul>
      {props.searchbar?<form className="d-flex" role="search">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>: "No Search Bar"}
      {/* {props.searchbar?<form className="d-flex" role="search">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>: "NO Search Bar"} */}
    </div>
  </div>
</nav>
    </div>
  )
}

Header.defaultProps = {
  title: "Your Title is this"
}

Header.propTypes = {
  title: PropTypes.string
}

在这个软件包中。

package.json：

{
  "name": "todolist",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^5.3.3",
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-bootstrap": "^2.10.9",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我尝试添加一个不确定的值，但传递标题，例如标题：{undefined}，但它没有奏效

使用

defaultProps

被弃用，最好破坏道具并定义默认值ES6方式，例如：

const Header = ({ title = 'Default title' }) => (
  <div>
    {/* Rest of the code */}
    <div>{title}</div>
  </div>
);

export default Header;

我还强烈建议您开始使用Typescript，因为它非常有帮助。至于为什么它不按其进行操作，请确保应用程序实际上是刷新的，您正在查看正确的组件，并且该标题在某个地方没有明确设置。 there是一个快速代码框：

https：//codesandbox.io/p/sandbox/nrkxfd

Answer 1