标签: clone-element

我正在编写一个组件，该组件state根据ref其子对象处理一些内部事件（例如，与该子对象的ref相关的鼠标事件）。
该组件使用a render-prop传递相关state子对象的子元素，并ref通过React.cloneElementutil 渲染带有附加子元素的子元素。

问题是，当子级是一个class组件时，由于某种原因该子级ref不可用，并且由于它是一种类型为react element的对象function（我当然也将其克隆），因此我找不到一种渲染方法。

但是，如果子DOM节点只是一个像a这样的节点div，则它按预期运行。

我的解决方法是检查子类型，如果是子类型，function则将克隆的元素包装成自己的子类型div，如果只是dom节点，则照原样渲染。
但是，我不想用多余的东西包裹孩子，div因为我不想添加不必要的DOM节点。

这是一个基本的代码示例，为简洁起见，删除了大多数代码：
Parent组件：

class Parent extends Component {

    attachRef = node => {
        this.ref = node;
    }

    render() {
        const { render } = this.props;
        const { someValue } = this.state;
        const Child = render(someValue);
        const WithRef = React.cloneElement(Child, {
            ref: this.attachRef
        }); …