react render props

前言

为什么需要做render props?

• 原始的做法：

<A>  
    <B>xxxx</B></A>  

存在的问题在于: 如果B组件需要A组件内的数据是做不到的

• 解决方式：

向组件内部动态传入带内容的结构(标签)

Vue中:
使用slot技术, 也就是通过组件标签体传入结构

React中:
使用children props: 通过组件标签体传入结构
使用render props: 通过组件标签属性传入结构, 一般用render函数属性

概念

Render props 模式是一种 React 组件设计模式，用于将组件之间的代码复用。该模式通过将一个函数作为组件的 props，使得这个函数可以被组件内部调用，并且将组件的状态和逻辑传递给这个函数。这个函数就成为了一个“渲染 prop”，因为它负责渲染组件的一部分内容。

在 React 中，常见的使用 render props 模式的组件有很多，例如 React Router 的 Route 组件，React 的 Context 组件，以及像 Formik 这样的表单处理库。这些组件在使用时都需要传递一个函数作为 props，这个函数接收组件的状态和逻辑，然后渲染组件的一部分内容。

Render props 模式可以使组件的代码更加可复用和灵活，使得组件可以更加专注于处理数据和逻辑，而不是关注于如何渲染。同时，这种模式也可以帮助组件避免继承和 mixin 等混乱的代码复用方式，使得组件更加清晰和易于维护。

例子

import React, { Component } from 'react';  
  
class Tooltip extends Component {  
  state = { text: '' };  
  showTooltip = text => {    this.setState({ text });  };  
  hideTooltip = () => {    this.setState({ text: '' });  };  
  render() {    const { text } = this.state;  
    return this.props.children({ showTooltip: this.showTooltip, hideTooltip: this.hideTooltip, text });  }}  
  
class App extends Component {  
  render() {    return (      <div>        <Tooltip>          {({ showTooltip, hideTooltip, text }) => (            <div>              <button onMouseEnter={() => showTooltip('Hello World')} onMouseLeave={hideTooltip}>                Hover me              </button>              {text && <div>{text}</div>}            </div>          )}        </Tooltip>      </div>    );  }}  
  
export default App;