問題

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 進行型別檢查

來源

搜尋《考試競技》微信小程式