reactjs React克隆节点-制作拷贝

bksxznpy 于 2023-01-08 发布在 React

关注(0)|答案(2)|浏览(213)

是否可以在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} />
        )
    }
});

reactjs

来源：https://stackoverflow.com/questions/38399105/react-clonenode-make-a-copy

2条答案

按热度按时间

cbeh67ev1#

在父元素TestParent中保留一个状态，表示现在应该有多少个子元素TestChild，比如this.state.count，然后在父元素的render方法中，将状态Map到TestChilds。onClick函数只是增加计数器。

赞(0）回复(0）举报 2023-01-08

pprl5pva2#

我不太明白你到底想做什么，但是引用你的子组件然后使用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} />
        )
    }
});

也许这个有用？

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs React克隆节点-制作拷贝

2条答案

相关问题

热门标签

最新问答