Cloning instances with Roact?

Help and Feedback Scripting Support
#1

I want to clone an instance into a viewport frame using Roact. The issue is that I do not know how I would clone an instance into something using roact. There were no developer forum posts related to my issue. Here is the component, ItemViewport which I need an instance to be cloned into.

    local component = Roact.PureComponent:extend("ItemViewport")

    function component:init(props)
        self:setState({object = props.object})
        self.CameraRef = Roact.createRef()
    end

    function component:render()
        return Roact.createElement("ViewportFrame", {
            BorderSizePixel = 0;
            BackgroundColor3 = Color3.fromRGB(255, 255, 255);
            CurrentCamera = self.CameraRef;
            Size = UDim2.new(1, 0, 1, 0);
        }, {
            Camera = Roact.createElement("Camera", {
                CFrame = CFrame.new(Vector3.new(2, 1, 2.5), Vector3.new(0, 0, 0));
                [Roact.Ref] = self.CameraRef
            });
            Instance = Roact.cloneInstance() -- I know this doesn't exist but I need something with this functionality
        })
    end
#2

What are you meaning when you say “clone an instance into [something]?”

An instance of what and to where specifically?

#3

I am trying to clone a model into a viewportframe that is created using Roact, but I don’t want to list all of the properties of the model since the models can be very large. I would like to know if there is a way of cloning using Roact instead of stating children and properties.

#4

Alright I found a solution to my problem, using the didMount function in a component, heres the updated component if anyone is interested:

    local component = Roact.PureComponent:extend("ItemViewport")

    function component:init(props)
        self:setState({object = props.object})
        self.CameraRef = Roact.createRef()
        self.ViewportRef = Roact.createRef()
    end

    function component:render()
        return Roact.createElement("ViewportFrame", {
            BorderSizePixel = 0;
            BackgroundColor3 = Color3.fromRGB(255, 255, 255);
            CurrentCamera = self.CameraRef;
            Size = UDim2.new(1, 0, 1, 0);
            [Roact.Ref] = self.ViewportRef;
        }, {
            Camera = Roact.createElement("Camera", {
                CFrame = CFrame.new(Vector3.new(2, 1, 2.5), Vector3.new(0, 0, 0));
                [Roact.Ref] = self.CameraRef
            });
        })
    end

    function component:didMount()
        if self.state.object then
            self.state.object.Parent = self.ViewportRef:getValue()
        end
    end

it clones the object into the viewport after the instance is created.

4 Likes