react如何判断属性非空

判断属性非空的方法

在React中，可以通过多种方式判断属性（props）是否非空。以下是几种常见的方法：

使用条件渲染

function MyComponent(props) {
  if (props.myProp) {
    return <div>{props.myProp}</div>;
  }
  return null;
}

使用逻辑与运算符

function MyComponent(props) {
  return (
    <div>
      {props.myProp && <span>{props.myProp}</span>}
    </div>
  );
}

使用默认值

function MyComponent(props) {
  const { myProp = 'default' } = props;
  return <div>{myProp}</div>;
}

使用PropTypes检查

import PropTypes from 'prop-types';

function MyComponent(props) {
  return <div>{props.myProp}</div>;
}

MyComponent.propTypes = {
  myProp: PropTypes.string.isRequired
};

使用TypeScript类型检查

interface MyComponentProps {
  myProp: string;
}

function MyComponent({ myProp }: MyComponentProps) {
  return <div>{myProp}</div>;
}

使用可选链操作符

function MyComponent(props) {
  return <div>{props?.myProp}</div>;
}

每种方法适用于不同的场景，可以根据具体需求选择合适的方式。