React 基础面试题, 如果 React 组件的属性没有传值,它的默认值是什么?

Step 1

Q:: React 组件的属性没有传值，它的默认值是什么？

A:: 在 React 中，如果组件的属性（props）没有传递值，通常该属性的值是 undefined。但是，你可以使用 React 提供的 defaultProps 来设置属性的默认值。例如：

 
MyComponent.defaultProps = {
  name: '默认名称'
};
 

这样，当 name 属性没有传递时，它的默认值将会是 '默认名称'。请注意，从 React 17 开始，使用函数组件时推荐直接在函数参数的解构赋值中设置默认值，而不是使用 defaultProps。

Step 2

Q:: 如何使用 ES6 的解构赋值来设置 React 组件属性的默认值？

A:: 在函数组件中可以通过 ES6 解构赋值来设置默认值。例如：

 
function MyComponent({ name = '默认名称' }) {
  return <div>{name}</div>;
}
 

这样，如果 name 属性没有被传递，则 name 会自动被赋值为 '默认名称'。

Step 3

Q:: class 组件如何设置 props 的默认值？

A:: 对于 class 组件，可以使用 defaultProps 静态属性来设置 props 的默认值。例如：

 
class MyComponent extends React.Component {
  static defaultProps = {
    name: '默认名称'
  };
  render() {
    return <div>{this.props.name}</div>;
  }
}
 

Step 4

Q:: 什么是 React 的 PropTypes？它有什么作用？

A:: PropTypes 是 React 的一种类型检查工具，用于确保组件接收到的数据类型是正确的。你可以在开发环境中使用 PropTypes 来检查 props 的类型是否符合预期。例如：

 
import PropTypes from 'prop-types';
 
function MyComponent({ name }) {
  return <div>{name}</div>;
}
 
MyComponent.propTypes = {
  name: PropTypes.string
};
 

这样，如果 name 属性传入的不是字符串，React 会在控制台中发出警告。这有助于在开发过程中捕捉类型错误。

Step 5

Q:: 如何在函数组件中使用 PropTypes？

A:: 在函数组件中，你可以通过导入 PropTypes 模块，并在组件定义后添加 propTypes 属性来定义类型检查。例如：

 
import PropTypes from 'prop-types';
 
function MyComponent({ age }) {
  return <div>{age}</div>;
}
 
MyComponent.propTypes = {
  age: PropTypes.number.isRequired
};
 

在这个例子中，age 属性必须是数字并且是必需的，否则会在开发环境中发出警告。