实现接收name属性的React函数组件 代码测试不通过语法问题求解

• 需求要求实现函数组件，你当前编写的是Class类组件，不符合基础实现要求
• 不需要在组件内部维护state，直接读取传入的props.name即可，多余的state逻辑属于冗余代码
• 解构赋值逻辑错误：const { name } = name; 右侧的name变量未定义，取值应该从props中获取
• 空值判断逻辑语法错误：if ({ name } == "" || undefined || null) 不符合JS语法规则：使用{name}会生成一个新对象，和空字符串对比永远不成立；且逻辑或的每个判断项需要单独和name做对比，不能简写为== "" || undefined || null
• 空值场景要求渲染Hi （Hi后带空格），你当前返回的<h1>Hi</h1>没有空格，不符合输出要求

// 函数组件直接接收props作为参数
export default function WithProps(props) {
  const { name } = props
  // 匹配空字符串、undefined、null时返回空值
  const renderName = name || ''
  return <h1>Hi {renderName}</h1>
}

也可以用更简洁的参数解构写法：

export default function WithProps({ name }) {
  return <h1>Hi {name || ''}</h1>
}

内容的提问来源于stack exchange，提问作者Barak David