从ASP.NET初始化React组件

Question

Hopefully this is a slam-dunk for someone out there...my essential problem is this: I've built up a very nice set of react components which i can render in my asp.net 4.5 mvc 6 application using react.js, flux, gulp, and browserify.

as long as i have it structured so that the react components have all the data they need everything is perfect. My issue now is that I would like to have an MVC view include the react stuff, and inject run-time properties into the top-level component as it is created. Since I'm brpowserify-ing all of my react code into a bundle, i just include the one script tag in my view:

<script src="/js/modules/AuthContainer.jsx"></script>

But whereas I would normally use JSX syntax to instantiate my component with props like this:

...the view in ASP.NET never gets translated to pure JS, so that fails.

I've also tried:

  ReactDOM.render
  (
     React.createElement(AuthContainer, { successPath: '/home' }),
     document.getElementById('reactRoot')
  );

...from inside a script block in my view but i get:

Uncaught ReferenceError: AuthContainer is not defined

But i'm sure i'm exposing 'AuthContainer' via the browserify-ed bundle, so i don't understand why it's unable to resolve that component.

I know there's a React.NET way to do this, but i can't get that server-side rendering to work with my components because I'm using jQuery to fetch data in componentDidMount and the server-side rendering is choking looking for $() jQuery stuff.

I'd love to get the server side rendering going but right now i just need it to do work, one way of the other. Can someone provide a simple code snippet or gist of how to instantiate a React component from inside a cshtml file with run-time props?

Answer 1

One easy solution is this, just put your server side properties with Javascript in a global:

index.cshtml

<script>
var __config__ = {
  base: "@MyBackEdnVariable",
  initialCount: "@Count",
  user: {
    id: @user.id,
    name: @user.name,
  }
};
</script>
<script src="/js/modules/AuthContainer.jsx"></script>

And with React use that global variable:

AuthContainer.js

class AuthContainer extends React.Component {
  render() {
    return (
      <div>{this.props.user.name}</div>
    );
  }
}

AuthContainer.defaultProps = {
  initialCount: __config__.initialCount,
  user: __config__.user
};

Answer 2

For posterity:

ReactDOM.render
(
    React.createElement
    (
        MyComponent, 
        {
            prop1: @numericValue,
            prop2: '@textValue',
        }
    ), 
    document.getElementById('reactRoot')
);

the magic was the jsx-alternative syntax, which i was aware of couldn't get a handle on that day. This allows you to instantiate react using pure JS and therefor just embed inside a simple script tag in your cshtml.

hth.