目的

修改props.children的属性。传入一个组件，返回一个具有新属性的组件。

方法

cloneElement

const Lock = (props) => {
    const N = cloneElement(props.ss, { disabled: true });
    return (
        <>
            {N}
        </>
    );
};
const A = () => (
        <Lock ss={<Button type="primary">btn</Button>} />
);

将函数组件作为参数传递

const Lock = (props) => {
    const Btn = props.ss;
    return <Btn disabled={false} />;
};
const Btn = (props) => (
    <Button type="primary" disabled={props.disabled}>
        btn
    </Button>
);
const A: FC = () => <Lock ss={Btn} />;

render-props

//TODO 

元素与组件

• 元素是构成 React 应用的最小砖块。元素描述了你在屏幕上想看到的内容。React 元素是不可变对象。
• 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
• 组件是由元素构成的。组件接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

参考资料

• 高阶组件