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

Question

我有以下组件：

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的新手，我假设我需要以某种方式告诉组件期望一个对象或类似的东西。有人能指出我正确的方向吗？

Answer 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组件选项接受的格式）：

“[{value：'chocolate'，label：'Chocolate'}，{value：'strawberry'，label：'Strawberry'}，{value：'vanilla'，label：'Vanilla'}]”

我的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'));

希望有帮助:)