render-props模式
程序员文章站
2022-05-26 11:12:02
...
1.创建公共的复用组件
2.在复用组件的render方法直接返回 this.props.children(this.state)
3.在使用组件的地方回调函数的参数就是children的值
import React from 'react'
import ReactDOM from 'react-dom'
/*
render props 模式
*/
import PropTypes from 'prop-types'
// 导入图片资源
import img from './images/cat.png'
// 作用:鼠标位置复用
class Mouse extends React.Component {
// 鼠标位置state
state = {
x: 0,
y: 0
}
// 鼠标移动事件的事件处理程序
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 监听鼠标移动事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
// 推荐:在组件卸载时移除事件绑定
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
return this.props.children(this.state)
}
}
// 添加props校验
Mouse.propTypes = {
children: PropTypes.func.isRequired
}
class App extends React.Component {
render() {
return (
<div>
<h1>render props 模式</h1>
<Mouse>
此时mouse的值就是上面Mouse组件的this.state的值
{mouse => {
return (
<p>
鼠标位置:{mouse.x} {mouse.y}
</p>
)
}}
</Mouse>
<Mouse>
{mouse => (
<img
src={img}
alt="猫"
style={{
position: 'absolute',
top: mouse.y - 64,
left: mouse.x - 64
}}
/>
)}
</Mouse>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
方法2:(不推荐)使用render
import React from 'react'
import ReactDOM from 'react-dom'
/*
render props 模式
*/
// 导入图片资源
import img from './images/cat.png'
// 作用:鼠标位置复用
class Mouse extends React.Component {
// 鼠标位置state
state = {
x: 0,
y: 0
}
// 鼠标移动事件的事件处理程序
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 监听鼠标移动事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
render() {
return this.props.render(this.state)
}
}
class App extends React.Component {
render() {
return (
<div>
<h1>render props 模式</h1>
<Mouse
render={mouse => {
return (
<p>
鼠标位置:{mouse.x} {mouse.y}
</p>
)
}}
/>
{/* 猫捉老鼠 */}
<Mouse
render={mouse => {
return (
<img
src={img}
alt="猫"
style={{
position: 'absolute',
top: mouse.y - 64,
left: mouse.x - 64
}}
/>
)
}}
/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
上一篇: Vue组件不显示问题