Skip to content

Add additional option to include initialization script for Html.React #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Add additional option to include initialization script for Html.React #42

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bef2896
Add additional option to include initialization script for server-sid…
BartAdv Nov 4, 2014
361df6f
Refactor Html.React with initialization flag into standalone method
BartAdv Nov 6, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 31 additions & 2 deletions src/React.Web.Mvc4/HtmlHelperExtensions.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ private static IReactEnvironment Environment
get { return AssemblyRegistration.Container.Resolve<IReactEnvironment>(); }
}

private static IReactComponent CreateComponentAndRender<T>(string componentName, T props, out string html)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if having this as a separate method adds value, it may be better to just inline the Environment.CreateComponent call in both of the methods below.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And then it would check if component haven't been rendered already?

{
var reactComponent = Environment.CreateComponent(componentName, props);
html = reactComponent.RenderHtml();
return reactComponent;
}

/// <summary>
/// Renders the specified React component
/// </summary>
Expand All @@ -42,11 +49,33 @@ public static IHtmlString React<T>(
T props
)
{
var reactComponent = Environment.CreateComponent(componentName, props);
var result = reactComponent.RenderHtml();
string result;
CreateComponentAndRender(componentName, props, out result);
return new HtmlString(result);
}

/// <summary>
/// Renders the specified React component and inserts client-side initialization code
/// </summary>
/// <typeparam name="T">Type of the props</typeparam>
/// <param name="htmlHelper">HTML helper</param>
/// <param name="componentName">Name of the component</param>
/// <param name="props">Props to initialize the component with</param>
/// <returns>The component's HTML</returns>
public static IHtmlString ReactWithInit<T>(
this HtmlHelper htmlHelper,
string componentName,
T props)
{
string html;
var reactComponent = CreateComponentAndRender(componentName, props, out html);
var script = new TagBuilder("script")
{
InnerHtml = reactComponent.RenderJavaScript()
};
return new HtmlString(html + "\n" + script.ToString());
}

/// <summary>
/// Renders the JavaScript required to initialise all components client-side. This will
/// attach event handlers to the server-rendered HTML.
Expand Down