2

我有以下组件：

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

4

1 回答 1

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

希望有帮助:)

于 2019-04-19T22:55:08.107 回答