第六章 React props-优快云博客

本文链接：https://blog.youkuaiyun.com/fullStackChenZF/article/details/71081234

本文详细介绍了React中的Props概念，包括Props的基本使用、设置默认值、父子组件间的数据传递以及Props类型的验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一章里,主要讲了React state,在本章里,主要讨论React props。
在React中，一个非常常用的模式就是将组件抽象封装起来。这些组件将对外公开一些属性（Props）来完成一些简单的功能，然而其内部细节可能是比较复杂的。一般情况下，Props是不变的。
state 和 props 主要的区别是什么? state 可以根据与用户交互来改变的，而props 是不可以改变的，常用于子组件的数据传递; props 组件直接的、单向的数据流动,从父组件向子组件流动。
props的使用
在React中，使用this.props.属性名来获取某一个具体属性的属性值。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var HelloProps = React.createClass({
render:function() {
return <h1>Hello {this.props.name} </h1>;
}
});
ReactDOM.render(
<HelloProps name="zbx"/>,
document.getElementById('hello')
);
</script>
</body>
</html>
为props设置默认值
可以通过 getDefaultProps() 方法为 props 设置默认值,如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var HelloProps = React.createClass({
getDefaultProps:function(){
return {
name: "zhiboxuan"
};
},
render:function() {
return <h1>Hello {this.props.name} </h1>;
}
});
ReactDOM.render(
<HelloProps />,
document.getElementById('hello')
);
</script>
</body>
</html>

把父组件的属性值传给子组件
Props可以看做是在组件之间进行通信的一种方式。
方法一:把子组件写到父组件中实现数据传递
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var Child = React.createClass({
render:function(){
return(
<span>Hello {this.props.fullName}</span>
);
}
});

var Parent = React.createClass({
addFamilyName:function(name){
return (name + 'chen');
},
render:function(){
return(
<div>
<Child fullName={this.addFamilyName(this.props.name)} name={this.props.name}/>
</div>
);
}
});

ReactDOM.render(
<Parent name="jin" />,document.getElementById("hello")
)
</script>
</body>
</html>
方法二、结合state和props实现数据传递
以下例子演示了如何在应用中组合使用 state 和 props，实现数据传递。可以先在父组
件中设置state，并通过在子组件上使用 props 将其传递到子组件上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var Computer = React.createClass({
getInitialState: function() {
return {
type: "联想笔记本电脑",
price: "4500.00RMB"
};
},

render: function() {
return (
<div>
<Type type={this.state.type} />
<Price price={this.state.price} />
</div>
);
}
});

var Type = React.createClass({
render: function() {
return (
<h1>{this.props.type}</h1>
);
}
});

var Price = React.createClass({
render: function() {
return (
<h1>
{this.props.price}
</h1>
);
}
});

ReactDOM.render(
<Computer />,
document.getElementById('hello')
);
</script>
</body>
</html>
props验证
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes
提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 propTypes。
需要注意的是，如果想要在浏览器中正确显示警告信息，需要引入react-with-addons.js，必须是没有压缩的过的，min 的版本也不会有提示。
检测输入的年龄必须是数字，其他情况，控制台发出警告信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script type="text/javascript" src="js/react-with-addons.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var ageValue = "12";
var People = React.createClass({
propTypes: {
age: React.PropTypes.number.isRequired,
},
render: function() {
return <h1>你的实际年龄: {this.props.age} </h1>;
}
});
React.render(
<People age={ageValue} />,
document.getElementById('hello')
);
</script>
</body>
</html>
上面的例子，因为ageValue是字符串，所以在控制台有一段如下信息：

2、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script type="text/javascript" src="js/react-with-addons.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var Test = React.createClass({
propTypes: {
//必须验证
requiredFunc: React.PropTypes.func.isRequired,//类型是函数
requiredAny: React.PropTypes.any.isRequired,//非空验证
//类型验证
bool: React.PropTypes.bool,//布尔类型
func: React.PropTypes.func,//函数类型
number: React.PropTypes.number,//数值类型
string: React.PropTypes.string,//字符串类型
},
render:function(){
return (
<h1>{this.props.bool}</h1>
)
}
});
var component = React.render(
<Test requiredFunc="bar" bool="true" requiredAny="a"/>,
document.body
);
</script>
</body>
</html>