https://react.docschina.org/blog/2016/07/13/mixins-considered-harmful.html
class Mouse extends React.Component {
// … 省略state和操作state的方法
render() {
return this.props.render(this.state)
}
}
<Mouse render={(mouse) => (
<p>鼠标当前位置 {mouse.x},{mouse.y}</p>
)}/>
<Mouse>
{({x, y}) => <p>鼠标的位置是 {x},{y}</p> }
</Mouse>
// 组件内部:
this.props.children(this.state)
// Context 中的用法:
<Consumer>
{data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>
Mouse.propTypes = {
chidlren: PropTypes.func.isRequired
}
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
封装一个组件,用于提取公共的状态和逻辑,比如鼠标的位置以及鼠标位置的更新,渲染的内容是不确定的,让组件接受一个叫children的prop,而且children必须是一个函数
withMouse
withRouter
withXXX
const CatWithMouse = withMouse(Cat)
const PositionWithMOuse = withMouse(Position)
// 高阶组件内部创建的类组件:
const WithMouse = (Base) => {
class Mouse extends React.Component {
// 处理鼠标的位置等操作
render() {
return <Base {...this.state} />
}
}
return Mouse
}
// 创建组件
const MousePosition = withMouse(Position)
// 渲染组件
<MousePosition />
<WrappedComponent {...this.state} {...this.props} />
原因:高阶组件没有往下传递props
<WrappedComponent {...this.state} {...this.props} />