React:Render Props

作者: MJ 分类: react 发布时间: 2019-04-09 10:42

官方解释:

术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术

具有 render prop 的组件接受一个函数,该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

核心代码: {this.props.render(this.state)} ,通过render函数把state值传递出去,Mouse组件只传递数据,不关心逻辑。

import React, { Component } from 'react';
class Cat extends React.Component {
    render() {
      const { name } = this.props.name;
      return (
        <h1>{name}</h1>
      );
    }
  }
class Mouse extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            name:"render props demo" 
        };
      }
    
      render() {
        return (
          <div>
            {this.props.render(this.state)}
            {/* 这一句是核心 */}
          </div>
        );
      }
  }

class RenderMode extends Component{
      render() {
        return (
            <div>
                <Mouse render={name => (
                    <Cat name={name} />
                )}/>
            </div>
        );
      }
}

export default RenderMode;

摘自:https://zh-hans.reactjs.org/docs/render-props.html

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注