首页 技术 正文
技术 2022年11月23日
0 收藏 995 点赞 3,279 浏览 1760 个字

1. 使用props属性和组合

1. props.children

在需要自定义内容的地方渲染props.children

function Dialog(props) { //通用组件
return (
<div>
<h1 className="dialog-title">{props.title}</h1>
<p className="dialog-message">
{props.message}
</p>
{
props.children //在组件最后用户可以自定义添加内容
}
</div>
)
}
class SignUpDialog extends React.Component {
constructor(props) {
super(props);
this.state={
loginName: ''
}
}
handleChange = (e) => {
this.setState({
loginName: e.target.value
})
}
render() {
return (
<Dialog
title="welcom"
message="Thank you for visiting our spacecraft!"
>
<input
type="text"
value={this.state.loginName}
onChange={this.handleChange}
/>
<button>
注册
</button>
</Dialog>
)
}
}

2. 将组件作为变量传递到另一个组件

function Dialog(props) { //通用组件
return (
<div>
{
props.selfDefine || <h1 className="dialog-title">{props.title}</h1>
}
<p className="dialog-message">
{props.message}
</p>
</div>
)
}
class SignUpDialog extends React.Component {
render() {
const h2 = <h2>这是自定义的标题</h2>;
return (
<Dialog
title="welcom"
message="Thank you for visiting our spacecraft!"
selfDefine={h2}
/>
)
}
}

2. 高阶组件

详情

3. Render props

统指属性值是函数的属性,返回值用于指定渲染内容。

当将函数作为属性时,如果函数直接定义在属性上,每次render都会生成一个新的函数;会导致props始终处于变化状态。这时和PureComponent冲突。
解决办法:
1)将PureComponent改为Component
2) 函数传入函数实例。在外部定义好函数后传入

属性名称可以随意指定,children也可以是一个返回渲染内容的函数。

这个属性很多时候可以替代高阶组件;也可以和高阶组件一起使用。

import img from './cat.png';
import './index.css';class Cat extends React.Component {
render() {
const { x, y} = this.props.mouse;
return (
<img style={{position: 'absolute', top:y, left: x }} src={img} />
)
}
}// 公用组件;相当于高阶组件的公共部分
class Mouse extends React.Component{
constructor(props) {
super(props);
this.state = {
x: 50,
y: 0
}
}
handleMouseOver = (e) => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
render() {
return (
<div style={{height: '100%'}} onMouseMove={this.handleMouseOver}>
<h1>查看鼠标</h1>
{this.props.renderMouse(this.state)}
</div>
)
}
}
class MouseTracker extends React.Component {
render() {
return(
<Mouse renderMouse={(mouse) => <Cat mouse={mouse}/>}/>
)
}
}
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,932
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,453
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,267
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,084
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,715
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,753