在index.cshtml中用剃刀渲染reactjs组件

Question

这是CRUD（创建，更新，删除）MVC 5应用程序+实体框架+ Reactjs的演示

我正在尝试将下面的标签转换为reactjs组件并呈现整个页面，但问题是剃刀线。渲染时仅显示文本。

我该怎么办？

客户视图索引：

<h2>Index</h2>

<div id="root">

</div>

<p>
    @Html.ActionLink("Add New Customer", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
    </th>
    <th></th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
            @Html.ActionLink("Details", "Details", new { id = item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
}

Reacjs.jsx

class Table extends React.Component {
    render() {
        return (
            <div className="Table">
                @Html.ActionLink("Add New Customer", "Create")
            </div>
        );
    }
}
ReactDOM.render(
    <Table />, document.getElementById('root')
);