中国建设银行网站企业登陆,如何做产品网站推广,工程建设范围,阿里云邮箱企业邮箱本人大二学生一枚#xff0c;热爱前端#xff0c;欢迎来交流学习哦#xff0c;一起来学习吧。 专栏推荐 #x1f525;#xff1a;js专栏
#x1f525;#xff1a;vue专栏
#x1f525;#xff1a;react专栏 文章目录09 【组合组件】1.包含关系2.特例关系问题…本人大二学生一枚热爱前端欢迎来交流学习哦一起来学习吧。 专栏推荐 js专栏
vue专栏
react专栏
文章目录09 【组合组件】1.包含关系2.特例关系问题09 【组合组件】
1.包含关系
有些组件无法提前知晓它们子组件的具体内容。在 Sidebar侧边栏和 Dialog对话框等展现通用容器box的组件中特别容易遇到这种情况。
我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中 组件标签里面包含的子元素会通过 props.children 传递进来。 function One(props) {return (div{props.children}/div//特殊的children props);
}function Two(props) {return (//这使别的组件可以通过JSX嵌套来将任意组件作为子组件来传递给他们OnedivHello/divdivWorld/div/One
);
}2.特例关系问题
有些时候我们会把一些组件看作是其他组件的特殊实例比如 WelcomeDialog 可以说是 Dialog 的特殊实例。
在 React 中我们也可以通过组合来实现这一点。“特殊”组件可以通过 props 定制并渲染“一般”组件
.FancyBorder {padding: 10px 10px;border: 10px solid;
}.FancyBorder-blue {border-color: blue;
}.Dialog-title {margin: 0;font-family: sans-serif;
}.Dialog-message {font-size: larger;
}function Dialog(props) {return (FancyBorder colorblueh1 classNameDialog-title{props.title}/h1p classNameDialog-message{props.message}/p/FancyBorder);
}function WelcomeDialog() {return (DialogtitleWelcomemessageThank you for visiting our spacecraft! /);
}在 CodePen 上尝试
组合也同样适用于以 class 形式定义的组件。
function Dialog(props) {return (FancyBorder colorblueh1 classNameDialog-title{props.title}/h1p classNameDialog-message{props.message}/p{props.children}/FancyBorder);
}class SignUpDialog extends React.Component {constructor(props) {super(props);this.handleChange this.handleChange.bind(this);this.handleSignUp this.handleSignUp.bind(this);this.state {login: };}render() {return (Dialog titleMars Exploration ProgrammessageHow should we refer to you?input value{this.state.login}onChange{this.handleChange} /button onClick{this.handleSignUp}Sign Me Up!/button/Dialog);}handleChange(e) {this.setState({login: e.target.value});}handleSignUp() {alert(Welcome aboard, ${this.state.login}!);}
}在 CodePen 上尝试
