react_RenderProps_初识与尝试

Render Props

参考：react中文文档-Render Props
参考：(译) 使用 Render props 吧！

  本人理解：render props 即 父组件使用一个值是函数的props来在组件间共享代码，函数返回子组件；父组件不实现那一部分的渲染逻辑，交给函数中的子组件实现。相当于子组件通过父组件暴露的函数嵌入到父组件的某个特定位置。
  目前已知正在使用render props的库： React Router 和 Downshift 。
  光说概念解释不清，本人看官网的例子也不是完全明白，官网猫和老鼠的例子不太亲民。本人在本博客中自己尝试写一个render props。

怎么实现 render props？

demo地址：https://github.com/SwordHarry/react-renderProps

TitleCard

  目前在页面上有多个带有标题的卡片，简略样式如下：

红色标题头：左边一个标题文字，右边一个可点击的 more 查看更多；标题文字是变化的，点击查看更多的事件是变化的。
蓝色内容：内容完全可自定义。
总之页面上出现多处这样的带有标题的卡片，dom结构很类似。
现我们尝试用 render props 方式封装。

红色标题头：HeaderCard

import React, {
   Fragment} from 'react';
import './index.css';

function HeaderCard(props) {
   
    const {
    title, moreText, clickEvent } = props;
    const clickHandler = () => {
   
        if (typeof clickEvent === 'function') {
   
            clickEvent();
        }
    }
    return (
        <Fragment