Proper way of learning Roact/React-lua

Help and Feedback Scripting Support
#1

I’ve already looked at other posts relating to this particular issue, however, they have not helped me.

I’ve tried looking at the github documentation, however it doesn’t contain enough information to be useful for me.

I also tried looking at the React documentation but I don’t know enough about JSX syntax, so it just confuses me.

The issue that I’m encountering has to do with refs:

local React = require(game:GetService("ReplicatedStorage").ClientControllers.ClientModules.ReactLua.React)
local TCC = require(script.Parent.Parent.TCC)

local Frame = React.Component:extend("Frame")

function Frame:render()
	return React.createElement(TCC.MainThemeContext.Consumer, nil,
		function(theme)
			return React.createElement("Frame", {
				BackgroundColor3 = theme.BackgroundColor,
				BorderColor3 = theme.OutlineColor,
				
				Name = self.props.Name,
				Size = self.props.Size,
				Position = self.props.Position,
				BackgroundTransparency = self.props.BackgroundTransparency,
				AnchorPoint = self.props.AnchorPoint,
				ZIndex = self.props.ZIndex,
				Visible = self.visible,
				
				ref = self.props.ref
			})
		end
	)
end

return Frame

The Component.ref:getValue() value does not return the Frame, but instead, a dictionary full of internal values.

I’m extremely new to Roact/React-lua, so it entirely possible that I’m missing an obvious solution.

I’ve been stuck on this for nearly two weeks now, so any help would be appreciated

1 Like
#2

(Update)

By doing this:

local React = require(game:GetService("ReplicatedStorage").ClientControllers.ClientModules.ReactLua.React)
local TCC = require(script.Parent.Parent.TCC)

local Frame = React.Component:extend("Frame")

function Frame:init()
   self.frameRef = React.createRef()
end

function Frame:render()
	return React.createElement(TCC.MainThemeContext.Consumer, nil,
		function(theme)
			return React.createElement("Frame", {
				BackgroundColor3 = theme.BackgroundColor,
				BorderColor3 = theme.OutlineColor,
				
				Name = self.props.Name,
				Size = self.props.Size,
				Position = self.props.Position,
				BackgroundTransparency = self.props.BackgroundTransparency,
				AnchorPoint = self.props.AnchorPoint,
				ZIndex = self.props.ZIndex,
				Visible = self.visible,
				
				ref = self.frameRef
			})
		end
	)
end

return Frame

I can access the frame, however, it’s really tedious considering I then have to do this:

local instance = Component.current.ref.frameRef

(and it’s longer if I want to access a child of the component)

local instance = Component.current.props.children[child].ref.current[ref]

I seriously feel like I’m missing something here

#3

I eventually found a solution to my issue (a giant list of refs), however it just lead to more issues. I may just use another framework.

For anyone reading this in the future, Roblox finally has proper documentation for React-lua:

1 Like
#4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.