1、定义组件
1）函数组件
function GreateH(props){
return <div>
<h2>hello,{props.name}</h2>
</div>
}
ReactDOM.render(<GreateH name="kristy"/>, document.getElementById('root'));
2）类组件
class GreateH extends React.Component{
render(){
return <div>
<h2>hello,{this.props.name}</h2>
</div>
}
}
ReactDOM.render(<GreateH name="kristy"/>, document.getElementById('root'));
组件名称必须以大写字母开头。
3）将组件单独写在一个js文件中，使用时必须定义或者引入它。
title.js 在这里需将组件导出
import React from "react";
class GreateH extends React.Component{
render(){
return <div>
<h2>hello,{this.props.name}</h2>
</div>
}
}
export default GreateH;
在index.js中必须引入
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Title from './components/title'
ReactDOM.render(<Title name="kristy"/>, document.getElementById('root'));
serviceWorker.unregister();
4）组件的返回值只能有一个根元素。
2、props默认值
1）函数式组件设置默认值,设置静态属性defaultProps 的值。
function GreateH(props){
return <div>
<h2>hello,{props.name}</h2>
</div>
}
GreateH.defaultProps = {name:'CoCo'};
ReactDOM.render(<GreateH />, document.getElementById('root'));
2）类组件设置默认值。
第一种与函数组件相同，设置类的静态属性defaultProps 的值。
第二种是定义在类里面：
class GreateH extends React.Component{
//在此处定义
static defaultProps = {name:'CoCo'};
render(){
return <div>
<h2>hello,{this.props.name}</h2>
</div>
}
}
3、使用 PropTypes 进行类型检查
1）运行 npm i prop-types --save 安装prop-types，并在组件中导入 import PropTypes from 'prop-types'。
如果再次启动的时候有报错，可以将依赖包删了再安装一次试试。
2）校验示例：
GreateH.propTypes = {
name: PropTypes.string
};
PropTypes
下面是使用不同验证器的例子：
MyComponent.propTypes = {
// 你可以将属性声明为以下 JS 原生类型
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 任何可被渲染的元素（包括数字、字符串、子元素或数组）。
optionalNode: PropTypes.node,
// 一个 React 元素
optionalElement: PropTypes.element,
// 你也可以声明属性为某个类的实例，这里使用 JS 的
// instanceof 操作符实现。
optionalMessage: PropTypes.instanceOf(Message),
// 你也可以限制你的属性值是某个特定值之一
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 限制它为列举类型之一的对象
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 一个指定元素类型的数组
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 一个指定类型的对象
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 一个指定属性及其类型的对象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// 你也可以在任何 PropTypes 属性后面加上 `isRequired`
// 后缀，这样如果这个属性父组件没有提供时，会打印警告信息
requiredFunc: PropTypes.func.isRequired,
// 任意类型的数据
requiredAny: PropTypes.any.isRequired,
// 你也可以指定一个自定义验证器。它应该在验证失败时返回
// 一个 Error 对象而不是 `console.warn` 或抛出异常。
// 不过在 `oneOfType` 中它不起作用。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf`
// 验证器，它应该在验证失败时返回一个 Error 对象。 它被用
// 于验证数组或对象的每个值。验证器前两个参数的第一个是数组
// 或对象本身，第二个是它们对应的键。
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
更多详细的说明可以查看文档：https://react.docschina.org/docs/typechecking-with-proptypes.html