Render Props案例在微信小程序端无法使用
-
// cat.js
import catImage from './cat.jpg'
class Cat extends Taro.Component {
static defaultProps = {
mouse: {
x: 0,
y: 0
}
}render() {
const { mouse } = this.props;
return (
<Image src={catImage} style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
);
}
}// mouse.js
class Mouse extends Taro.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleClick.bind(this);
this.state = { x: 0, y: 0 };
}handleClick(event) {
const { x, y } = event.detail
this.setState({
x,
y
});
}render() {
return (
<View style={{ height: '100%' }} onClick={this.handleClick}>{/* 我们可以把 prop 当成一个函数,动态地调整渲染内容。 */} {this.props.renderCat(this.state)} </View> );
}
}// MouseTracker.js
class MouseTracker extends Taro.Component {
render() {
return (
<View>
<View>点击鼠标!</View>
{/*
Mouse 如何渲染由 MouseTracker 的状态控制
*/}
<Mouse renderCat={mouse => (
<Cat mouse={mouse} />
)}/>
</View>
);
}
}