您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
5.组件的参数props
发布时间：2025-02-11 11:51:03编辑：雪饮阅读（）
-
首先我们来玩下给组件传递消息props的基础使用，完整示例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
//主组件
class MessageBoxComponent extends React.Component{
constructor(props){
super(props);
this.state = {
titleMessage:'你好世界(来自state哦)',
subMessages:["消息1","消息2","消息3"]
};
}
render(){
return (
<div>
<h1>{this.state.titleMessage}</h1>
<SubMessage messages={this.state.subMessages}/>
</div>
);
}
}
//子组件(注意：组件的首字母必须大写)
class SubMessage extends React.Component{
constructor(props){
super(props);
}
render(){
//为接收到的messages创建元素包裹每个消息
var msgs = [];
this.props.messages.forEach(function(msg,index){
msgs.push(<div key={index}>{msg}</div>);
});
return (
<div>
<h2>我是子组件</h2>
<div>{msgs}</div>
</div>
);
}
}
ReactDOM.render(<MessageBoxComponent/>, document.getElementById('app'),function(){
console.log("组件渲染完成");
});
</script>
</body>
</html>
如果没有给子组件传递消息，子组件props获取对应消息就会出现错误，那么应该要定义一个子组件的默认消息以容错。
像是父组件里面如果这样调用：
<div>
<h1>{this.state.titleMessage}</h1>
<SubMessage/>
</div>
那么子组件定义一个默认属性消息prop
//子组件
class SubMessage extends React.Component{
static defaultProps={
messages:["没有传递messages的默认子消息"]
}
constructor(props){
super(props);
}
render(){
var msgs = [];
this.props.messages.forEach(function(msg,index){
msgs.push(<div key={index}>{msg}</div>);
});
return (
<div>
<h2>我是子组件</h2>
<div>{msgs}</div>
</div>
);
}
}
组件里面props里面的prop的值的类型限定，完整示例应如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
//主组件
class MessageBoxComponent extends React.Component{
constructor(props){
super(props);
this.state = {
titleMessage:'你好世界(来自state哦)',
subMessages:["消息1","消息2","消息3"]
};
}
render(){
return (
<div>
<h1>{this.state.titleMessage}</h1>
<SubMessage messages={this.state.subMessages}/>
</div>
);
}
}
//子组件
class SubMessage extends React.Component{
//组件的props的prop的类型限定
static propTypes={
messages:PropTypes.array.isRequired
};
static defaultProps={
messages:["没有传递messages的默认子消息"]
}
constructor(props){
super(props);
}
render(){
var msgs = [];
this.props.messages.forEach(function(msg,index){
msgs.push(<div key={index}>{msg}</div>);
});
return (
<div>
<h2>我是子组件</h2>
<div>{msgs}</div>
</div>
);
}
}
ReactDOM.render(<MessageBoxComponent/>, document.getElementById('app'),function(){
console.log("组件渲染完成");
});
</script>
</body>
</html>
但我看不出有什么效果，我如果给message传递如：
<div>
<h1>{this.state.titleMessage}</h1>
<SubMessage messages={'xxx'}/>
</div>
这样会报错，但并没有报错类似提示必须是提供数组的错误。暂时不纠结了。
还支持从顶层传递参数prop，完整示例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
//主组件
class MessageBoxComponent extends React.Component{
constructor(props){
super(props);
this.state = {
titleMessage:'你好世界(来自state哦)',
subMessages:["消息1","消息2","消息3"]
};
}
render(){
return (
<div>
<h1>{this.state.titleMessage}</h1>
<p>{this.props.title}</p>
<SubMessage messages={this.state.subMessages}/>
</div>
);
}
}
//子组件
class SubMessage extends React.Component{
static propTypes={
messages:PropTypes.array.isRequired
};
static defaultProps={
messages:["没有传递messages的默认子消息"]
}
constructor(props){
super(props);
}
render(){
var msgs = [];
this.props.messages.forEach(function(msg,index){
msgs.push(<div key={index}>{msg}</div>);
});
return (
<div>
<h2>我是子组件</h2>
<div>{msgs}</div>
</div>
);
}
}
var title="测试标题";
ReactDOM.render(<MessageBoxComponent title={title}/>, document.getElementById('app'),function(){
console.log("组件渲染完成");
});
</script>
</body>
</html>
不过我依旧看不出所以然，感觉这样应该是必须的吧。不纠结了。
关键字词：props,组件,参数