将数据从 Asp.Net 视图传递到 React 组件答案

【问题标题】：Passing data from an Asp.Net view into a React Component将数据从 Asp.Net 视图传递到 React 组件
【发布时间】：2018-08-29 14:55:33
【问题描述】：

我有以下组件：

class MyComponent extends React.Component {
    render() {
        return ( <div>  
            <label>{this.props.myData.Count()}</label>
        </div>
    );
}

这个想法是控件显示传入数据的计数；这是当前在 Asp.Net 视图中的内容：

<div>
    <MyComponent myData={@Model.MyData} />            
</div>

我可以在检查器中看到 myData 的值已传递给 MyComponent，我也知道 MyData 集合中有数据，但它没有显示任何内容。

我也试过这个：

@Html.React("MyComponent", new { myData = Model.MyData });

<div id="content">
    <MyComponent />
</div>

但这根本不渲染。

我可以使用以下格式来渲染控件：

<div id="content">
</div>
<script src="@Url.Content("~/js/component.jsx")"></script>

但这不允许我传入数据。

作为 React 的新手，我假设我需要以某种方式告诉组件期待一个对象或类似的东西。请有人指出我正确的方向吗？

【问题讨论】：

您是否有一个现有的 asp 应用程序，您想在其中添加一些响应？
是的 - 抱歉，我应该说清楚的。这不是一个新应用程序，它是一个现有的 Asp.Net Core 2 应用程序，我正在尝试将 React 用于特定功能。
嗨用户，你最终把 react 和 .net 的点联系起来了吗？

标签： reactjs components asp.net-core-2.0

【解决方案1】：

老问题，但我在研究同样的问题时偶然发现了这个问题。我很幸运地将我的数据作为 vbhtml/cshtml 文件中的全局 javascript 变量传递。

我的删节 vbhtml：

@Using (Html.BeginForm())
    @<div id="createdropdown” ></div>
    @<script src="~/scripts/bundle.js"></script>
    @<script>
        var gTypes = @Html.Raw(Json.Encode(Model));
     </script>
End Using

我的数据转换为 json 数组（请注意，我将数据结构化为 react-select 组件选项接受的格式）：

"[{值：'巧克力'，标签：'巧克力'}，{值： '草莓'，标签：'草莓'}，{值：'香草'，标签： '香草'}]"

我的 jsx：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Select from 'react-select'

class CreateForm extends React.Component {
        render() {
            return (<Select options={this.props.types} placeholder="Type" />);
       }
}

ReactDOM.render(<CreateForm types={gTypes} / >, document.getElementById('createdropdown'));

希望有帮助:)

【讨论】：