1.函数式组件
import React, { Component } from 'react';
import ReactDom from 'react-dom';
function Welcome(props) {
return <h1>{props.name}</h1>;
}
ReactDom.render(<Welcome name="张三"/>, document.getElementById('root')); //这个name，张三，会转化为一个key为name，value是张三的对象，传递给Welcome函数
2. 类组件
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class Welcome extends Component {
render() {
return <h1>{this.props.name}</h1>;
}
}
ReactDom.render(<Welcome name="张三"/>, document.getElementById('root')); //Component类的constructor中有“this.props = props”,并且同上，name=张三会议props的形式传入constructor中。类组件的render方法返回生成的react元素
组件名的首字母一定是大写的，组件只有一个根元素
3.props的校验
在vue中也有props，是父组件传递给子组件的值，有时子组件中对值的格式有特殊要求，就需要对props进行校验。在react中大致也是这个意思
- 无论使用函数还是类来声明组件，都不能修改它的props
- 函数组件就是一个纯函数，相同的输入产生相同的输出，不能有副作用
首先，安装包‘prop-types’
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import propTypes from "prop-types";
class Person extends Component {
static propTypes = { //需要在类上定义静态属性propTypes（固定写法）
name: PropTypes.string.isRequired, //必填
gender: PropTypes.oneOf(['male', 'female']), //gender只能从枚举中取
hobbies: PropTypes.arrayOf(PropTypes.string), // 类型为数组，并且每一项都是string
position: PropTypes.shape({ // position的类型为x，y为number类型的对象
x: PropTypes.number,
y: PropTypes.number,
}),
age(props, propName, componentName) { //以上校验均为prop-types包自带的，而此处校验为自定义的规则
let age = props.age;
if (age < 0 || age > 120) {
return new Error(`${componentName}的${propName}非法`);
}
},
};
render() {
let { age, name, gender, hobbies, position } = this.props;
return (
<div>
<p>age: {age}</p>
<p>name: {name}</p>
<p>gender: {gender}</p>
<p>hobbies: {hobbies}</p>
<p>position: {JSON.stringify(position)}</p>
</div>
);
}
}
ReactDom.render(
<Person
name="lcc"
age={200}
gender="male"
hobbies={['smoking', 'drinking']}
position={{ x: 100, y: 100 }}
/>,
document.getElementById('root')
);
