Question

希望这对于那里的人来说是一个扣篮...我的基本问题是：我已经构建了一组非常好的反应组件，我可以在我的asp.net 4.5 mvc 6应用程序中使用react .js，flux，gulp和browserify。

只要我将其结构化以便反应组件具有他们需要的所有数据，一切都是完美的。我现在的问题是，我希望MVC视图包含反应内容，并在创建时将运行时属性注入顶级组件。由于我将所有反应代码都包含在一个包中，我只在我的视图中包含一个脚本标记：

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

但是我通常会使用JSX语法来使用这样的道具来实例化我的组件：

... ASP.NET中的视图永远不会被转换为纯JS，因此失败。

我也试过了：

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

...在我的视图中从脚本块内部开始但是我得到了：

Uncaught ReferenceError: AuthContainer is not defined

但我确定我通过browserify-ed捆绑包暴露了'AuthContainer'，所以我不明白为什么它无法解析该组件。

我知道有一种React.NET方法可以做到这一点，但我不能让服务器端渲染与我的组件一起工作，因为我使用jQuery来获取componentDidMount中的数据，而服务器端渲染是窒息的正在寻找$() jQuery的东西。

我很乐意让服务器端渲染，但现在我只需要它来做另一种工作。有人可以提供一个简单的代码片段或如何从带有运行时道具的cshtml文件中实例化React组件的要点吗？

Answer 1

这是一个简单的解决方案，只需将您的服务器端属性与Javascript放在全局中：

index.cshtml

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

使用React使用全局变量：

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

后人：

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

魔术是jsx-alternative语法，我知道当天无法处理。这允许您使用纯JS实例化反应，因此只需在cshtml中嵌入一个简单的脚本标记。

第h

从asp.net

2 个答案: