資訊專欄INFORMATION COLUMN
原文鏈接： https://medium.com/@jrwebdev/...
和之前的文章一樣，本文也要求你對render props有一些知識背景，如果沒有官方文檔可能會對你有很大的幫助。本文將會使用函數作為children的render props模式以及結合React的context API來作為例子。如果你想使用類似于render這樣子的render props，那也只需要把下面例子的children作為你要渲染的props即可。
為了展示render props，我們將要重寫之前文章的makeCounter HOC。這里先展示HOC的版本:
export interface InjectedCounterProps {
value: number;
onIncrement(): void;
onDecrement(): void;
}
interface MakeCounterProps {
minValue?: number;
maxValue?: number;
}
interface MakeCounterState {
value: number;
}
const makeCounter = (
Component: React.ComponentType
) =>
class MakeCounter extends React.Component<
Subtract & MakeCounterProps,
MakeCounterState
> {
state: MakeCounterState = {
value: 0,
};
increment = () => {
this.setState(prevState => ({
value:
prevState.value === this.props.maxValue
? prevState.value
: prevState.value + 1,
}));
};
decrement = () => {
this.setState(prevState => ({
value:
prevState.value === this.props.minValue
? prevState.value
: prevState.value - 1,
}));
};
render() {
const { minValue, maxValue, ...props } = this.props;
return (
HOC向組件注入了value和兩個回調函數（onIncrement 和 onDecrement），此外還在HOC內部使用minValue和maxValue兩個props而沒有傳遞給組件。我們討論了如果組件需要知道這些值，如何不傳遞props可能會出現問題，并且如果使用多個HOC包裝組件，注入的props的命名也可能與其他HOC注入的props沖突。
makeCounter HOC將會被像下面這樣重寫:
interface InjectedCounterProps {
value: number;
onIncrement(): void;
onDecrement(): void;
}
interface MakeCounterProps {
minValue?: number;
maxValue?: number;
children(props: InjectedCounterProps): JSX.Element;
}
interface MakeCounterState {
value: number;
}
class MakeCounter extends React.Component {
state: MakeCounterState = {
value: 0,
};
increment = () => {
this.setState(prevState => ({
value:
prevState.value === this.props.maxValue
? prevState.value
: prevState.value + 1,
}));
};
decrement = () => {
this.setState(prevState => ({
value:
prevState.value === this.props.minValue
? prevState.value
: prevState.value - 1,
}));
};
render() {
return this.props.children({
value: this.state.value,
onIncrement: this.increment,
onDecrement: this.decrement,
});
}
}
這里有一些需要注意的變化。首先，injectedCounterProps被保留，因為我們需要定義一個props的interface在render props函數調用上而不是傳遞給組件的props（和HOC一樣）。MakeCounter（MakeCounterProps）的props已經改變，加上以下內容：
children(props: InjectedCounterProps): JSX.Element;
這是render prop，然后組件內需要一個函數帶上注入的props并返回JSX element。下面是它用來突出顯示這一點的示例：
interface CounterProps {
style: React.CSSProperties;
minValue?: number;
maxValue?: number;
}
const Counter = (props: CounterProps) => (
{injectedProps => (
{injectedProps.value}
)}
);
MakeCounter自己的組件聲明變得簡單多了；它不再被包裝在函數中，因為它不再是臨時的，輸入也更加簡單，不需要泛型、做差值和類型的交集。它只有簡單的MakeCounterProps和MakeCounterState，就像其他任何組成部分一樣：
class MakeCounter extends React.Component< MakeCounterProps, MakeCounterState >
最后，render（）的工作也變少了；它只是一個函數調用并帶上注入的props-不需要破壞和對象的props擴展運算符展開了！
return this.props.children({
value: this.state.value,
onIncrement: this.increment,
onDecrement: this.decrement,
});
然后，render prop組件允許對props的命名和在使用的靈活性上進行更多的控制，這是和HOC等效的一個問題：
interface CounterProps {
style: React.CSSProperties;
value: number;
minCounterValue?: number;
maxCounterValue?: number;
}
const Counter = (props: CounterProps) => (
{injectedProps => (
Some other value: {props.value}
{injectedProps.value}
{props.minCounterValue !== undefined ? (
Min value: {props.minCounterValue}
) : null}
{props.maxCounterValue !== undefined ? (
Max value: {props.maxCounterValue}
) : null}
)}
);
有了所有這些好處，特別是更簡單的輸入，那么為什么不一直使用render props呢？當然可以，這樣做不會有任何問題，但要注意render props組件的一些問題。
首先，這里有一個關注點以外的問題；MakeCounter組件現在被放在了Counter組件內而不是包裝了它，這使得隔離測試這兩個組件更加困難。其次，由于props被注入到組件的渲染函數中，因此不能在生命周期方法中使用它們（前提是計數器被更改為類組件）。
這兩個問題都很容易解決，因為您可以使用render props組件簡單地生成一個新組件：
interface CounterProps extends InjectedCounterProps {
style: React.CSSProperties;
}
const Counter = (props: CounterProps) => (
{props.value}
);
interface WrappedCounterProps extends CounterProps {
minValue?: number;
maxValue?: number;
}
const WrappedCounter = ({
minValue,
maxValue,
...props
}: WrappedCounterProps) => (
{injectedProps =>
);
另一個問題是，一般來說，它不太方便，現在使用者需要編寫很多樣板文件，特別是如果他們只想將組件包裝在一個多帶帶的臨時文件中并按原樣使用props。這可以通過從render props組件生成HOC來補救：
import { Subtract, Omit } from "utility-types";
import MakeCounter, { MakeCounterProps, InjectedCounterProps } from "./MakeCounter";
type MakeCounterHocProps = Omit;
const makeCounter = (
Component: React.ComponentType
): React.SFC & MakeCounterHocProps> => ({
minValue,
maxValue,
...props
}: MakeCounterHocProps) => (
{injectedProps =>
);
在這里，上一篇文章的技術，以及render props組件的現有類型，被用來生成HOC。這里唯一需要注意的是，我們必須從HOC的props中移除render prop(children)，以便在使用時不暴露它：
