資訊專欄INFORMATION COLUMN
原文鏈接： https://medium.com/@jrwebdev/...
和之前的文章一樣，本文也要求你對render props有一些知識(shí)背景，如果沒有官方文檔可能會(huì)對你有很大的幫助。本文將會(huì)使用函數(shù)作為children的render props模式以及結(jié)合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和兩個(gè)回調(diào)函數(shù)（onIncrement 和 onDecrement），此外還在HOC內(nèi)部使用minValue和maxValue兩個(gè)props而沒有傳遞給組件。我們討論了如果組件需要知道這些值，如何不傳遞props可能會(huì)出現(xiàn)問題，并且如果使用多個(gè)HOC包裝組件，注入的props的命名也可能與其他HOC注入的props沖突。
makeCounter HOC將會(huì)被像下面這樣重寫:
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被保留，因?yàn)槲覀冃枰x一個(gè)props的interface在render props函數(shù)調(diào)用上而不是傳遞給組件的props（和HOC一樣）。MakeCounter（MakeCounterProps）的props已經(jīng)改變，加上以下內(nèi)容：
children(props: InjectedCounterProps): JSX.Element;
這是render prop，然后組件內(nèi)需要一個(gè)函數(shù)帶上注入的props并返回JSX element。下面是它用來突出顯示這一點(diǎn)的示例：
interface CounterProps {
style: React.CSSProperties;
minValue?: number;
maxValue?: number;
}
const Counter = (props: CounterProps) => (
{injectedProps => (
{injectedProps.value}
)}
);
MakeCounter自己的組件聲明變得簡單多了；它不再被包裝在函數(shù)中，因?yàn)樗辉偈桥R時(shí)的，輸入也更加簡單，不需要泛型、做差值和類型的交集。它只有簡單的MakeCounterProps和MakeCounterState，就像其他任何組成部分一樣：
class MakeCounter extends React.Component< MakeCounterProps, MakeCounterState >
最后，render（）的工作也變少了；它只是一個(gè)函數(shù)調(diào)用并帶上注入的props-不需要破壞和對象的props擴(kuò)展運(yùn)算符展開了！
return this.props.children({
value: this.state.value,
onIncrement: this.increment,
onDecrement: this.decrement,
});
然后，render prop組件允許對props的命名和在使用的靈活性上進(jìn)行更多的控制，這是和HOC等效的一個(gè)問題：
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呢？當(dāng)然可以，這樣做不會(huì)有任何問題，但要注意render props組件的一些問題。
首先，這里有一個(gè)關(guān)注點(diǎn)以外的問題；MakeCounter組件現(xiàn)在被放在了Counter組件內(nèi)而不是包裝了它，這使得隔離測試這兩個(gè)組件更加困難。其次，由于props被注入到組件的渲染函數(shù)中，因此不能在生命周期方法中使用它們（前提是計(jì)數(shù)器被更改為類組件）。
這兩個(gè)問題都很容易解決，因?yàn)槟梢允褂胷ender props組件簡單地生成一個(gè)新組件：
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 =>
);
另一個(gè)問題是，一般來說，它不太方便，現(xiàn)在使用者需要編寫很多樣板文件，特別是如果他們只想將組件包裝在一個(gè)多帶帶的臨時(shí)文件中并按原樣使用props。這可以通過從render props組件生成HOC來補(bǔ)救：
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 =>
);
在這里，上一篇文章的技術(shù)，以及render props組件的現(xiàn)有類型，被用來生成HOC。這里唯一需要注意的是，我們必須從HOC的props中移除render prop(children)，以便在使用時(shí)不暴露它：
