Question

是否可以在React中执行cloneNode？

在基本级别，我想要做的是点击组件，然后让它制作该组件的副本供我使用。我最终想做一个简单的副本拖放然后放弃但我只是想知道如何克隆组件/元素。

还有更好的方法吗？该组件将是静态的，然后只需单击即可克隆它或动态创建以供使用。

var TestChild = React.createClass({
    onClick: function (e) {
        this.props.onClick(e);
    },
    render: function () {
        return (
            <div onClick={this.onClick}>Test Item</div>
        )
    }
});

var TestParent = React.createClass({
    onClick: function (e) {
        // cloneNode
    },
    render: function () {
        return (
            <TestChild onClick={this.onClick} />
        )
    }
});

Answer 1

如何在父元素TestParent中保持状态，表示现在应该有多少子元素TestChild，例如this.state.count，然后在父render中方法，将状态映射到TestChild s。 onClick函数只是递增计数器。以下是React docs中的example

Answer 2

我不是很了解您想确切地做什么，但是对于引用您的子组件然后使用cloneElement()来说，该怎么办？

var TestChild = React.createClass({
    onClick: function (e) {
        this.props.onClick(e);
    },
    render: function () {
        return (
            <div onClick={this.onClick}>Test Item</div>
        )
    }
});

var TestParent = React.createClass({
    onClick: function (e) {
        const newEl = React.cloneElement(this.myRef, {});
        // then you do whatever you need to do with your new copy of TestChild component
    },
    render: function () {
        return (
            <TestChild onClick={this.onClick} ref={this.myRef} />
        )
    }
});

也许这会有所帮助？

React cloneNode - 制作副本

2 个答案: