Render Props案例在微信小程序端无法使用



  • e5e6c1a0-f312-44b4-97b5-a6f8bf122f97-image.png
    // 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>
    );
    }
    }


登录后回复