react组件属性不匹配

// 父组件
function Parent() {
  return <Child name="John" />;
}

// 子组件
function Child(props) {
  return <div>{props.userName}</div>; // 错误：期望的属性名是 userName，但传递的是 name
}

// 子组件
function Child(props) {
  return <div>{props.name}</div>; // 正确：属性名一致
}

// 子组件
function Child(props) {
  return <div>{props.age}</div>;
}

Child.propTypes = {
  age: PropTypes.number.isRequired, // 期望 age 是 number 类型
};

function Parent() {
  return <Child age="twenty" />; // 错误：传递的是 string 类型
}

function Parent() {
  return <Child age={20} />; // 正确：传递的是 number 类型
}

// 子组件
function Child(props) {
  return <div>{props.name}</div>;
}

Child.propTypes = {
  name: PropTypes.string.isRequired, // name 是必需的
};

function Parent() {
  return <Child />; // 错误：未传递必需的 name 属性
}

function Parent() {
  return <Child name="John" />; // 正确：传递了必需的 name 属性
}