在类组件中,使用props的一个完整示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<!-- 引入组件标签类型声明文件 -->
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/babel">
// 1、创建类组件
class MyComponent extends React.Component {
// 对标签属性进行类型。必要性的限制
static propTypes = {
name: PropTypes.string.isRequired, // 限制name必传,且为字符串
sex: PropTypes.string, // 限制sex为字符串
age: PropTypes.number, // 限制age为数值
speak: PropTypes.func, // 限制speak为函数(注意,不能写成function)
};
// 对标签默认值进行设置
static defaultProps = {
sex: "男",
age: 18,
};
render() {
const {
name, age, sex } = this.props;
return (
<ul>
<li>姓名:{
name}</li>
<li>年龄:{
age}</li>
<li>性别:{
sex}</li>
</ul>
);
}
}
// 渲染组件
const info = {
name: "小明" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
</script>
</body>
</html>
函数式组件的结构和类组件的结构完全不同,那么函数式组件中如何使用?
函数式组件props的写法
当组件是一个函数时,其参数可以接受到props,我们看看示例
<script type="text/babel">
function MyComponent(props) {
console.log("props: ", props);
return (
<ul>
<li>姓名:??</li>
<li>年龄:??</li>
<li>性别:??</li>
</ul>
);
}
// 渲染组件
const info = {
name: "小明", age: 18, sex: "女" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
</script>
可以看到,函数的参数props(形参)可以接受到通过标签传递的所有参数
那么,函数式组件使用props也就非常容易了
<script type="text/babel">
function MyComponent(props) {
console.log("props: ", props);
return (
<ul>
<li>姓名:{
props.name}</li>
<li>年龄:{
props.age}</li>
<li>性别:{
props.sex}</li>
</ul>
);
}
// 渲染组件
const info = {
name: "小明", age: 18, sex: "女" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
</script>
页面效果:
函数式组件如何限定props类型
限定函数式组件的props类型也非常容易
对标签属性进行类型,我们给函数添加propTypes方法即可
MyComponent.propTypes = { /一些限制代码/ }
对标签默认值进行设置我们给函数添加 defaultProps方法即可
MyComponent.defaultProps = { /一些默认值设置/ }
一个比较完整的代码如下
<script type="text/babel"> function MyComponent(props) { return ( <ul> <li>姓名:{ props.name}</li> <li>年龄:{ props.age}</li> <li>性别:{ props.sex}</li> </ul> ); } // 对标签属性进行类型。必要性的限制 MyComponent.propTypes = { name: PropTypes.string.isRequired, // 限制name必传,且为字符串 sex: PropTypes.string, // 限制sex为字符串 age: PropTypes.number, // 限制age为数值 }; // 对标签默认值进行设置 MyComponent.defaultProps = { sex: "男", age: 18, }; // 渲染组件 const info = { name: "小明", age: 18, sex: "女" }; ReactDOM.render(<MyComponent { ...info} />, document.getElementById("test")); </script>
我们验证下
标签属性类型验证
// 对标签属性进行类型。必要性的限制 MyComponent.propTypes = { name: PropTypes.string.isRequired, // 限制name必传,且为字符串 sex: PropTypes.string, // 限制sex为字符串 age: PropTypes.number, // 限制age为数值 }; // 渲染组件 const info = { name: "小明", age: "18", sex: "女" };
上述代码中,我们定义了age的类型为数字,但是实际上我们传递了字符18,打开控制台,我们可以看到类型错误的一个报错,说明类型限制生效了
默认值设置
// 对标签默认值进行设置 MyComponent.defaultProps = { sex: "男", age: 18, }; // 渲染组件 const info = { name: "小明"};
上述代码中,我们sex和age的默认值进行了设置,但给标签只传递了name属性,观察页面,我们可以看到sex和age也展示了,这说明默认值的设置也生效了。