react 大冒险-render props-day 23

继 higher-order-component 後，今天来说明 react 中另个概念 render-props
所谓的 render-props 就是在 component 之间 share 的 prop 本身的值是 function

达成在 React Component 之间共享 code 的方法

一样从 HOC 该篇 的 ClickCounter 跟 HoverCounter 开始

这时候发现两个 component 中的 incrementCount 跟 updateTimes 高度重复
把 constructor 跟 incrementCount 抽出来，新增一个 Counter.js

但是 Counter return 的内容是 一个 render prop
Counter 的 render prop 分成两部分 this.state.count , this.incrementCount

import { Component } from "react";
class Counter extends Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0,
		};
		this.incrementCount = this.incrementCount.bind(this);
	}
	incrementCount() {
		this.setState((state) => {
			return { count: state.count + 1 };
		});
	}
	render() {
		const { count } = this.state;
		return <>{this.props.render(this.state.count, this.incrementCount)}</>;
	}
}

export default Counter;

回到 App.js，引入 Counter
这时候 pass in Counter 的 render prop 会是 function

import { Component } from "react";

import Counter from './Counter';
import ClickCounter from "./ClickCounter";

class App extends React.Component{
    render(){
        return(<Counter render={( count , incrementCount)=>(<ClickCounter count={count} incrementCount={incrementCount}/>)}/>)
    }
}

最後回到 ClickCounter.js
把 render 内的 state 都改为 prop (ClickCounter仅接受 prop，不再有 state)

import React from "react";

class ClickCounter extends React.Component {
	render() {
		const { count, incrementCount } = this.props;
		return (
			<div>
				<button onClick={incrementCount}>click {count} times</button>
			</div>
		);
	}
}

export default ClickCounter;