学习笔记
1.组件复用props方式
import React from "react";
// 复组件
class App extends React.Component {
render () {
return <div>
{/* props 模式 通过属性绑定的方式 */}
<Dbs render={(data => <p>{data.x}</p>)}></Dbs>
</div>
}
}
// 复用组件 复用的获取 当前鼠标的x y值
class Dbs extends React.Component {
state = {
x: '',
y: ''
}
componentDidMount () {
window.addEventListener("mousemove", (e) => {
this.setState({
x: e.clientX,
y: e.clientY
})
})
}
render () {
return this.props.render(this.state)
}
}
export default App;
2.组件复用children方式
import React from "react";
// 复组件
class App extends React.Component {
render () {
return <div>
{/*// children 方式直接 写vue插槽*/}
<Dbs>{(data => <p>{data.x}</p>)}</Dbs>
</div>
}
}
// 复用组件 复用的获取 当前鼠标的x y值
class Dbs extends React.Component {
state = {
x: '',
y: ''
}
componentDidMount () {
window.addEventListener("mousemove", (e) => {
this.setState({
x: e.clientX,
y: e.clientY
})
})
}
render () {
return this.props.children(this.state)
}
}
export default App;
