cloneElement

一、认识

---

React.cloneElement() 以 element 元素为样板克隆并返回新的 React 元素。返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，而来自原始元素的 key 和 ref 将被保留。

二、语法

---

React.cloneElement(
  element,
  [props],
  [...children]
)

三、场景

---

3.1 封装 Input 组件

import React from 'react';

function decorator(value, onChange) {
    return (Comp) =>
        React.cloneElement(Comp, {value, className: 'decorator', onChange});
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '装饰 Input 表单组件',
        };
    }
    handleChange = (e) => {
        const {value} = e.target;
        this.setState({
            value,
        });
    };
    render() {
        return (
            <div>
                {decorator(this.state.value, this.handleChange)(<input />)}
            </div>
        );
    }
}

export default App;