Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "React Props type checksum default value example analysis", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "React Props type checksum default value sample analysis" this article.

I. check of props rules

Install the prop-types package

$npm install prop-types

Import propTypes object

Import propTypes from 'prop-types'

Component name. PropTypes = {} set component parameter passing rules

Comp.propTypes = {the param parameter of the param: propTypes.array / / Comp component must be an array type}

Example:

/ / props type checking rules import React from 'react';// 1. Npm I prop-types// 2. Import the propTypes object import PropTypes from "prop-types"; function Son ({list}) {return ({list.map (item = > {item})

)} / / 3. Component name. PropTypes = {} set the rule Son.PropTypes= {/ / 4 for the component. The list parameter of each field setting rule list: PropTypes.array / / Son must be in array form} class App extends React.Component {render () {return ()}} export default App

The error message is as follows:

Four common structures

Common types: array, number, bool, string, func, object, symbol

React element type: element

Required: isRequired

Specific structural object: shape ({})

Core code:

/ / 1. Type optionalFun: PropTypes.fun;// 2. Required: requiredFun: PropTypes.fun.isRequired;// 3. / / you can specify that an object is composed of specific type values: optionalObjectWithShape: PropTypes.shape ({color: PropTypes.string, fontSize: PropTypes.number}). Second, props default value 1. Function defaults 1.1 function parameter defaults (recommended in the new version)

Example:

Import React from "react" / / 1. Function parameter default value function Son1 ({defaultTime = 10}) {return (The timer is: {defaultTime})} class App extends React.Component {render () {return ()}} export default App

1.2 defaultProps setting default function Son2 ({defaultTime}) {return (The second timer is: {defaultTime})} / / 2.defaultProps setting default Son2.defaultProps = {defaultTime: 100} class App extends React.Component {render () {return ()}}

two。 DefaultPropsclass Son3 extends React.Component {render () {return (The defaultTimer is: {this.props.defaultTime})} / / defaultProps setting default value Son3.defaultProps = {defaultTime: 3333} 2.2 Class static attribute declaration class Son4 extends React.Component {static defaultProps = {defaultTime: 66666} render () {return ( The defaultTimer is: {this.props.defaultTime})}}

Complete example

/ / props default import {func} from "prop-types"; import React from "react" / / 1.1 function parameter default value function Son1 ({defaultTime = 10}) {return (The timer is: {defaultTime})} function Son2 ({defaultTime}) {return (The second timer is: {defaultTime})} / / 1.2 defaultProps set default value Son2.defaultProps = {defaultTime: 100} class Son3 extends React.Component {render () {return ( The defaultTimer is: {this.props.defaultTime})}} / / 2.1Function defaultProps setting default Son3.defaultProps = {defaultTime: 3333} / / 2.2static attribute declaration class Son4 extends React.Component {static defaultProps = {defaultTime: 66666} render () {return (The defaultTimer is: {this.props.defaultTime})}} Class App extends React.Component {render () {return ()}} export default App

As shown in the figure:

The above is all the contents of the article "sample Analysis of Props Type checksum defaults in React". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.