求助：传入子组件的Props无法渲染，仅显示硬编码内容

以下是几个核心排查和解决方向：

• 核对Props命名完全匹配
  父组件传递的props名称必须和子组件接收的名称完全一致，大小写、拼写都不能错。
  父组件传递示例：

  <ErrorTip errorMsg={loginError} />
  

  子组件接收示例：

  // 正确接收对应名称的props
  function ErrorTip({ errorMsg }) {
    return <div className="error">{errorMsg || '账号或密码错误'}</div>;
  }
  

• 确保子组件正确调用Props
  子组件里不能只写死硬编码内容，必须明确使用传入的props值。
  错误写法：

  // 完全没用到传入的props
  function ErrorTip() {
    return <div>账号或密码错误</div>;
  }
  

  正确写法：

  // 优先使用props值，无值时才用默认硬编码内容
  function ErrorTip(props) {
    return <div>{props.errorMsg || '账号或密码错误'}</div>;
  }
  

• 验证父组件状态是否更新
  父组件里的错误消息必须通过状态管理（比如useState）更新，确保状态变化能传递给子组件。
  父组件状态更新示例：

  function LoginForm() {
    const [loginError, setLoginError] = useState('');
  
    const handleLogin = () => {
      // 模拟登录失败，更新错误状态
      setLoginError('用户名不存在，请重试');
    };
  
    return (
      <div>
        <button onClick={handleLogin}>登录</button>
        <ErrorTip errorMsg={loginError} />
      </div>
    );
  }
  

• 检查条件渲染逻辑
  子组件如果有条件判断，要确保逻辑方向正确，别搞反导致一直显示硬编码内容。
  错误逻辑示例：

  // 逻辑写反：有错误消息时显示硬编码内容
  function ErrorTip({ errorMsg }) {
    return errorMsg ? '账号或密码错误' : errorMsg;
  }
  

  正确逻辑示例：

  // 有传入的错误消息就显示，否则用默认值
  function ErrorTip({ errorMsg }) {
    return <div>{errorMsg || '账号或密码错误'}</div>;
  }
  

内容的提问来源于stack exchange，提问作者Anupam Kumar