2022年前端React的100道面试题的第5题：React渲染元素

问题

React可被渲染的元素包含哪些？

选项

A JS的所有类型数据；

B 原生DOM元素和React组件；

C 数组形式包裹的有效元素；

D React.Fragments 元素；

答案

B、C、D

解答

React 内置了一些类型检查的功能，要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性，它对类组件和函数组织都支持：

import PropTypes from 'prop-types';
​
// 类组件
class ClassComp extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
ClassComp.propTypes = {
  name: PropTypes.node
};
​
// 函数组件
function FuncComp({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}
FuncComp.propTypes = {
  name: PropTypes.node
}

我们这里使用的是 PropTypes.node 类型检测，他表示接受任何可被渲染的元素，支持：包括数字、字符串、元素或数组，以及 Fragment 元素。对于 undefined 和 null，以及布尔值都会转换为空值。

但并非所有数据类型，例如传入一个对象时就会报如下错误：

react-dom.development.js:13261 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

PropTypes 功能是在 React 运行时，且仅在开发模式下进行检查。对 props 类型检查工具，在组件的稳定性和可读性上都是大的帮助，建议开发者养成书写习惯。

资料

使用 PropTypes 进行类型检查

来源

搜索《考试竞技》微信小程序

标签：面试题,name,元素,React,PropTypes,2022,props,组件
来源： https://www.cnblogs.com/nachao/p/15611824.html