Javascript 反应克隆节点-复制

有可能在React中进行克隆节点测试吗

在基本层面上，我想做的是单击组件，然后让它复制该组件供我使用。我最终想做一个简单的复制拖放，但我只是想知道如何克隆组件/元素

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

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} />
        )
    }
});

var TestChild=React.createClass({
onClick：函数（e）{
this.props.onClick（e）；
},
渲染：函数（）{
返回(
测试项目
)
}
});
var TestParent=React.createClass({
onClick：函数（e）{
//克隆节点
},
渲染：函数（）{
返回(
)
}
});

在父元素

TestParent

中保留一个状态如何，表示现在应该有多少子元素

TestChild

，如

this.state.count

，然后在父元素的

render

方法中，将状态映射到

TestChild

s。而

onClick

函数只需增加计数器。下面是React文档中的一个例子，在父元素

TestParent

中保留一个状态如何，表示现在应该有多少子元素

TestChild

，比如

this.state.count

，然后在父元素的

render

方法中，将状态映射到

TestChild

s。而

onClick

函数只需增加计数器。下面是React文档中的一个示例

我真的不太明白您到底想做什么，但是如何引用您的子组件，然后使用，类似这样的东西

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} />
        )
    }
});

var TestChild=React.createClass({
onClick：函数（e）{
this.props.onClick（e）；
},
渲染：函数（）{
返回(
测试项目
)
}
});
var TestParent=React.createClass({
onClick：函数（e）{
const newEl=React.cloneElement（this.myRef，{}）；
//然后，您可以对TestChild组件的新副本执行任何需要执行的操作
},
渲染：函数（）{
返回(
)
}
});

---

也许这会有帮助？

我不太明白您到底想做什么，但如何引用您的子组件，然后使用，类似这样的东西

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} />
        )
    }
});

var TestChild=React.createClass({
onClick：函数（e）{
this.props.onClick（e）；
},
渲染：函数（）{
返回(
测试项目
)
}
});
var TestParent=React.createClass({
onClick：函数（e）{
const newEl=React.cloneElement（this.myRef，{}）；
//然后，您可以对TestChild组件的新副本执行任何需要执行的操作
},
渲染：函数（）{
返回(
)
}
});

---

也许这有帮助？

React has

cloneElement

method-，您可以尝试使用itReact has

cloneElement

method-，您可以尝试使用it@fes只需通过调用

onClick

事件处理程序中的

this.setState

和

render（）来更新
count
变量

函数将被自动调用，以在组件被添加时使用新的

计数重新呈现组件，但是否仍有方法传递当前鼠标事件并将其传递给新组件？我想在组件上执行鼠标下移（完成）->创建新组件（重新渲染后）（完成）->鼠标下移现在在新组件上->我现在可以控制新组件。我一直在试图解决如何执行最后两个步骤。@fes只需通过调用
onClick
事件处理程序中的
this.setState
和
render（）来更新
count
变量即可
函数将被自动调用，以在组件被添加时使用新的
计数重新呈现组件，但是否仍有方法传递当前鼠标事件并将其传递给新组件？我想在组件上执行鼠标下移（完成）->创建新组件（重新渲染后）（完成）->鼠标下移现在在新组件上->我现在可以控制新组件。我一直在想最后两步怎么做。