render-props模式的两种写法

最新推荐文章于 2024-09-24 14:02:08 发布

Boriska1996

最新推荐文章于 2024-09-24 14:02:08 发布

阅读量690

点赞数

CC 4.0 BY-SA版权

分类专栏： react JS 文章标签： react js vue

本文链接：https://blog.youkuaiyun.com/RequesToGod/article/details/108262687

JS 同时被 2 个专栏收录

15 篇文章

订阅专栏

react

5 篇文章

订阅专栏

本文介绍React中的Render-Props模式，展示了两种实现方式及其应用场景。通过案例解析，比较了不同写法的优劣，强调了复用性和组件的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

render-props模式

第一种写法：

在mousemove案例中，我自己使用的方式是父子传值的方式进行数据的传递。

有没有更简单的方式呢？

首先通过render将子组件中的数据state返回出去

子组件代码块：

import React, { Component } from 'react'

export default class index extends Component {
    constructor(){
        super()
        this.state={
            x:0,
            y:0
        }
    }
    render() {
        return this.props.render(this.state)
    }
    componentDidMount(){
        window.addEventListener("mousemove",this.mouseMoveHandler)
    }
    mouseMoveHandler=(e)=>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }

}

在父组件挂载时，同样通过render进行数据的接收，拿到数据后，return数据渲染的模板。

类似于Vue.js中的插槽

  render() {
    return (
      <div className="list">
        <Mouse render={data=>{
          return <p>{data.x}</p>
        }}></Mouse>
      </div>
    )
  }

第二种写法：

子组件中将render换成children

    render() {
        return this.props.children(this.state)
    }

父组件中挂载的方式有所不同

        <Mouse>
          {
            ({x,y})=>{
            return <p>{x}:{y}</p>
            }
          }
        </Mouse>

个人认为第二种更好理解使用一些，同样的一个组件，但复用效果更加完美。

拓展：父组件代码块：

import React, { Component } from 'react'
import './App.css';
import Mouse from "../src/component/mousemove/index"
export default class App extends Component {
  constructor(){
    super();
    this.state={
      AppX:0,
      AppY:0,
      adddata:'',
    }
  }
  render() {
    return (
      <div className="list">
        <Mouse>
          {
            ({x,y})=>{
            return <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2784038833,1273241182&fm=26&gp=0.jpg"  style={{
              position:"absolute",
              left:x+'px',
              top:y+'px'
            }}/>
            }
          }
        </Mouse>
      </div>
    )
  }

  changeHandler=(x,y)=>{
    this.setState({
      AppX:x,
      AppY:y
    })
  }
}