Передача данных из представления Asp.Net в компонент React

Question

У меня есть следующий компонент:

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

Идея состоит в том, что элемент управления отображает количество передаваемых данных; вот что в данный момент отображается в Asp.Net View:

<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

Старый вопрос, но я наткнулся на это, исследуя ту же проблему. Мне посчастливилось передать мои данные в виде глобальной переменной javascript из файла vbhtml / cshtml.

Мой сокращенный 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 (обратите внимание, что я структурировал данные в формате, принятом опциями компонентаact-select):

"[{value: 'chocolate', ярлык: 'Chocolate'}, {value: «клубника», этикетка: «клубника»}, {значение: «ваниль», этикетка: 'Ваниль'}] "

мой 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'));

Надеюсь, это поможет:)