You can write your topic however you want, but you need to answer these questions:
- What do you want to achieve? Keep it simple and clear!
I am wondering how I can insert a existing function component inside an existing component as it’s child?
Here is my script so far:
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Roact = require(ReplicatedStorage.Module.roact)
-- tip that indicate what to do
-- if you still dont get it:
--[[
|-------|
| btn |
| what |
-------
]]
local function what(info)
Roact.createElement("TextLabel",{
AnchorPoint = Vector2.new(0.2,0);
Position = UDim2.fromScale(0.2,0);
Text = info;
Font = Enum.Font.GothamSemiBold;
BackgroundColor3 = Color3.fromRGB(107, 107, 158);
BorderColor3 = Color3.fromRGB(95, 95, 121);
BorderSizePixel = 2;
BorderMode = Enum.BorderMode.Inset;
})
end
local menuBg = Roact.createElement("Frame",{-- what i want to insert the what function in as a child
BackgroundColor3 = Color3.fromRGB(217, 216, 247);
BorderSizePixel = 0;
Size = UDim2.fromScale(0.3,0.4);
Position = UDim2.fromScale(0.5,0.5);
AnchorPoint = Vector2.new(0.5,0.5);
},{
title = Roact.createElement("TextLabel",{
AnchorPoint = Vector2.new(0.5,0);
Position = UDim2.fromScale(0.5,0.2);
BackgroundTransparency = 1;
-- text part
Text = "Jinx";
Font = Enum.Font.GothamBold;
TextSize = 36;
});
})
local menu = Roact.createElement("ScreenGui",{},{})
local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
Roact.mount(Roact.createElement("ScreenGui",{},menuBg), PlayerGui)
I thinked that I could create the menu bg as a function compent however I am not sure if it will be great when it come to roact standard.
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Roact = require(ReplicatedStorage.Module.roact)
-- tip that indicate what to do
-- if you still dont get it:
--[[
|-------|
| btn |
| what |
-------
]]
local function what(info)
Roact.createElement("TextLabel",{
AnchorPoint = Vector2.new(0.2,0);
Position = UDim2.fromScale(0.2,0);
Text = info;
Font = Enum.Font.GothamSemiBold;
BackgroundColor3 = Color3.fromRGB(107, 107, 158);
BorderColor3 = Color3.fromRGB(95, 95, 121);
BorderSizePixel = 2;
BorderMode = Enum.BorderMode.Inset;
})
end
local function createMenuBg(...)
local extraComponent = {...}
local menuBg = Roact.createElement("Frame",{-- what i want to insert the what function in as a child
BackgroundColor3 = Color3.fromRGB(217, 216, 247);
BorderSizePixel = 0;
Size = UDim2.fromScale(0.3,0.4);
Position = UDim2.fromScale(0.5,0.5);
AnchorPoint = Vector2.new(0.5,0.5);
},{
title = Roact.createElement("TextLabel",{
AnchorPoint = Vector2.new(0.5,0);
Position = UDim2.fromScale(0.5,0.2);
BackgroundTransparency = 1;
-- text part
Text = "Jinx";
Font = Enum.Font.GothamBold;
TextSize = 36;
});
extraComponent
})
end
local menu = Roact.createElement("ScreenGui",{},{})
local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
Roact.mount(Roact.createElement("ScreenGui",{},createMenuBg(what("Lorem ipsum dolor sit amet."))), PlayerGui)
Sorry if the layout for the code box have weird new line I use vs code for doing the markdown job for my post on the devforum