关于react 的render props 如何使用

最近开始复习react内容，看到这块的时候想起来以前也没用过，就写了一个小例子看看，代码如下

import React from 'react';

class Tip extends React.Component{
    render() {
        const pos = this.props.pos;
        console.log('ps', pos)
        return (
            <div style={{position: 'fixed', backgroundColor: "#234567",left:pos.left, top: pos.top, visibility: pos.vis}}>
                <h1>{pos.title}</h1>
                <p>{pos.content}</p>
            </div>
        )
    }
}


class Btn extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            left: '200px',
            top: '50px',
            vis: 'hidden',
            title: '这是title',
            content: '这是content'
        }
        this.clickBtn = this.clickBtn.bind(this)
    }

    clickBtn() {
        let viss = this.state.vis === 'hidden' ?  'visible' : 'hidden';
        this.setState({
            vis: viss
        })
    }

    render() {
        return (
            <div style={{width:'80px', height:'32px', backgroundColor: '#892749'}} onClick={this.clickBtn}>
                点击按钮
                {this.props.render(this.state)}
            </div>
        )
    }
}

class TipShow extends React.Component{
    render() {
        
        return (
            <>
                <Btn render={pos => {
                    console.log(pos)
                    return <Tip pos={pos} ></Tip>
                }}>
                    
                </Btn>
            </>
        )
    }
}

export default TipShow