本文将为您提供关于ReactPropTypes的详细介绍，同时，我们还将为您提供关于11.ReactpropTypesdefaultProps、import{PropTypes}from'react'
本文将为您提供关于React PropTypes的详细介绍，同时，我们还将为您提供关于11.React propTypes defaultProps、import {PropTypes} from 'react'; PropTypes is undefined、javascript – 创建自定义PropTypes,扩展react中的默认PropTypes、React Native 0.71 发布，默认使用 TypeScript、恢复 PropTypes的实用信息。
本文目录一览：- React PropTypes
- 11.React propTypes defaultProps
- import {PropTypes} from 'react'; PropTypes is undefined
- javascript – 创建自定义PropTypes,扩展react中的默认PropTypes
- React Native 0.71 发布，默认使用 TypeScript、恢复 PropTypes
React PropTypes
PropTypes 用于指定 component 参数类型或是否 required 等，起到校验作用，使用 PropTypes 有两个好处：
1. You can easily open up a component and check which props are required and what type they should be.
2. When things get messed up React will give you an awesome error message in the console, saying which props is wrong/missing plus the render method that caused the problem.
PropTypes 中的参数类型有：
React.createClass({
propTypes: {
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: React.PropTypes.node,
// A React element.
optionalElement: React.PropTypes.element,
// You can also declare that a prop is an instance of a class. This uses
// JS''s instanceof operator.
optionalMessage: React.PropTypes.instanceOf(Message),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: React.PropTypes.oneOf([''News'', ''Photos'']),
// An object that could be one of many types
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// An array of a certain type
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn''t provided.
requiredFunc: React.PropTypes.func.isRequired, //参数为function，且必须
// A value of any data type
requiredAny: React.PropTypes.any.isRequired,
//自定义参数校验类型
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(''Validation failed!'');
}
}
},
/* ... */
});如果参数传入不正确，则 console 会出现类似以下 warning：
如果指定了 propTypes，但使用 Component 时不想传入任何参数，可以使用 getDefaultProps ();
var ComponentWithDefaultProps = React.createClass({
getDefaultProps: function() {
return {
value: ''default value''
};
}
/* ... */
});
11.React propTypes defaultProps
父组件
/*
React中的组件: 解决html 标签构建应用的不足。
使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入。
父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件
父子组件传值（react 父子组件通信）：
父组件给子组件传值
1.在调用子组件的时候定义一个属性 <Header msg=''首页''></Header>
2.子组件里面 this.props.msg
说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。
父组件主动获取子组件的数据
1、调用子组件的时候指定ref的值 <Header ref=''header''></Header>
2、通过this.refs.header 获取整个子组件实例 (dom（组件）加载完成以后获取 )
*/
import React, { Component } from ''react'';
import Header from ''./Header'';
import ''../assets/css/index.css'';
class Home extends Component {
constructor(props){
super(props);
this.state={
title:''首页组件'',
count:20
}
}
render() {
return (
<div>
{/* <Header title={this.state.title} /> */}
{/* <Header/> */}
{/* <Header title={this.state.title} num=''aaaaaaaaaaaaa'' /> */}
<Header title={this.state.title} num={this.state.count} />
<br />
<hr />
<br />
这是首页组件的内容
</div>
);
}
}
export default Home;
子组件
import React, { Component } from ''react'';
/*
父组件给子组件传值：
defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值
propTypes：验证父组件传值的类型合法性
1、引入import PropTypes from ''prop-types'';
2、类.propTypes = {
name: PropTypes.string
};
都是定义在子组件里面
https://reactjs.org/docs/typechecking-with-proptypes.html
*/
import PropTypes from ''prop-types'';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
msg:"我是一个头部组件"
};
}
render() {
return (
<div>
<h2>---{this.props.title}--- {this.props.num}</h2>
</div>
);
}
}
//defaultProps 如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值
Header.defaultProps={
title:''标题''
}
//同行propTypes定义父组件给子组件传值的类型
Header.propTypes={
num:PropTypes.number
}
export default Header;
import {PropTypes} from 'react'; PropTypes is undefined
import {PropTypes} from ''react'';上面这种获取PropTypes的已经被废弃,现在相关功能已经移动prop-types.js文件里去了，因此应该用下面import PropTypes from ''prop-types'';
javascript – 创建自定义PropTypes,扩展react中的默认PropTypes
我正在尝试创建一个自定义PropType,用于检查数组是否具有数值并且长度为2(并且对数字的排序有一些约束).
显然我可以为前两个约束做Array.PropType.arrayOf(Array.PropType.number).
我想在我的自定义PropType中重用它(而不是推出我自己的数字和数组检查).
我怎么做？
您的函数将传递三个参数：props,propName,componentName
从文档中查看React.PropTypes中显示的倒数第二个示例.
所以应该满足你的约束的函数是：
function isTwoelementArrayOfNumbers( props,componentName ){
var _array = props[ propName ];
if( _array && _array.constructor === Array && _array.length === 2 ){
if( !_array.every(
function isNumber( element ){
return typeof element === 'number';
})
){
return new Error('elements must be numbers!');
}
}
else{
return new Error('2 element array of numbers not provided!');
}
}
...in your react element
propTypes:{
numArray: isTwoelementArrayOfNumbers
},
React Native 0.71 发布，默认使用 TypeScript、恢复 PropTypes
React Native 0.71 版本正式发布，这是一个功能丰富的版本，包括：默认的 TypeScript、Flexbox Gap、恢复 PropTypes 和新架构更新等。
默认 TypeScript
从 0.71 版本开始，当你通过 React Native CLI 创建一个新的 React Native 应用时，你将默认得到一个 TypeScript 应用。
我们还直接从 react-native 包中提供内置的、更准确的 TypeScript 声明。这意味着你将不再需要 @types/react-native，并且类型将与 React Native 版本同步更新。
用 Flexbox gap 简化布局
通过 React Native，你可以使用 Flexbox 在不同的屏幕尺寸上灵活地布局组件。浏览器已经支持 Flexbox gap、rowGap 和 columnGap 属性，它们允许你指定 Flexbox 中所有项目之间的空间大小。
这些属性在 React Native 中已经被要求了很久，0.71 版本增加了对使用像素值定义的 gap 的初始支持。在未来的版本中，我们将增加对更多数值的支持，比如百分比。
受 Web 启发的可访问性、样式和事件属性
这个版本包括了一些受 Web 标准启发的新属性，以使 React Native 的 API 在许多平台上保持一致。这些新的属性是纯增量的，所以对于同等的可访问性、行为或样式属性，没有预期的迁移或行为改变。
对于引入的任何新的属性别名，如果现有的属性有不同的名称，并且两者都被指定，那么新的别名属性值将被优先考虑。例如，这个版本为图像组件的 source 增加了一个 src 属性别名，以便与 Web 上的 src 属性保持一致。如果同时提供 src 和 source，将使用新的 src 属性。
恢复 PropTypes
React Native 的属性类型，如 ViewPropTypes 和 Text.propTypes，在 0.66 版本中已经被废弃，访问它们会输出废弃警告。当它们在 0.68 版本中被删除时，许多开发者在升级到最新版本的 React Native 时开始遇到错误。
所以在这个版本中，我们重新添加了 React Native 的 PropTypes，以便人们更容易升级和迁移他们的代码，避免使用它们。在 0.71 版本中，deprecated-react-native-prop-types 包也已经更新了所有的属性。在未来，我们计划继续进行废弃，并再次删除属性类型。
开发者体验的改进
React DevTools
这个版本将网络上两个流行的 React DevTools 功能带到了 React Native。
"Click to inspect" 是 React Dev Tools 左上角的选项，允许你在应用中点击一个项目，以在 Dev Tools 中检查它，类似于 Chrome 的元素检查器。
组件高亮将高亮你在应用中的 DevTools 中选择的元素，这样你就可以看到哪些 React 组件与屏幕上的哪些元素相一致。
新架构
这个版本根据目前收集到的用户反馈和报告，为实验性的新架构体验带来了许多改进。
- 缩短了构建时间：新的发布模式使用 Maven Central，这使我们能够大大减少 Android 上的构建时间，解决了 Windows 上的许多构建问题，并为新架构提供了更多的无缝体验。
- 少写 C++ 代码：你现在可以启用新架构，而不必在你的应用中添加任何 C++ 代码，CLI 应用模板中的所有 C++ 代码和 CMake 文件都已被清理
- 更好地封装了 iOS 应用设置：在 iOS 上，采用了与 Android 类似的方法，并将大部分设置新架构的逻辑封装在
RCTAppDelegate类中，这将简化未来的升级 - 更好的 iOS 依赖管理：对于库维护者，我们增加了一个新的
install_module_dependencies函数，在你的podspec包中调用，这将为新架构安装所有需要的依赖。 - 错误修复和更好的 IDE 支持：修复了用户在新架构工作组中报告的几个错误和问题
更多详情可查看：https://reactnative.dev/blog/2023/01/12/version-071
关于React PropTypes的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于11.React propTypes defaultProps、import {PropTypes} from 'react'; PropTypes is undefined、javascript – 创建自定义PropTypes,扩展react中的默认PropTypes、React Native 0.71 发布，默认使用 TypeScript、恢复 PropTypes等相关内容，可以在本站寻找。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
