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

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

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

希望有帮助：）

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

1 个答案: