Question

我还是React的新手。慢慢地，我试图将react作为我的MVC网站的前端进行集成，但是我似乎坚持将AJAX调用迁移到EmployeeGrid表中。对于我的索引，我正在执行以下

<Route exact path='/' component={Intro} />
<Route exact path='/Home/GSC' component={GSC} />

Intro工作正常，GSC部分工作。数据未在表中显示。这就是我的GSC.js中的内容

import React from 'react';

function EmployeeGridRow() {
    <tr>
        <td>{this.props.item.AccountID}</td>
        <td>{this.props.item.AccountName}</td>
        <td>{this.props.item.SenderName}</td>
        <td>{this.props.item.SenderEmail}</td>
        <td>{this.props.item.ITEmailReceipients}</td>
        <td>{this.props.item.Active}</td>
    </tr>;
}

class EmployeeGridTable extends React.Component {
    getInitialState() {
        return {
            items: []
        };
    }

    componentDidMount() {
        //Fetch data via ajax
        $.get(this.props.dataUrl, function (data) {
            if (this.isMounted()) {
                this.setState({
                    items: data
                });
            }
        }.bind(this));
    }
    
    render() {
        var rows = [];
        this.state.items.forEach(function (item) {
            rows.push(
                <EmployeeGridRow key={item.AccountID} item={item} />);
        });
        return (
            <table className="table table-bordered table-responsive">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Sender</th>
                        <th>Email</th>
                        <th>IT Support</th>
                        <th>Active</th>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>);
    }
}

export default EmployeeGridTable(dataUrl = "/Home/GetEmployeeData");

有什么建议吗？

更新

我在想，也许我没有很好地解释。以下内容适用，但前提是我将其插入.cshtml。有什么方法可以将其转换为JS或JSX文件？

<script type="text/babel">
@* Here we will create 2 react component 1 for rows and another for table  *@
var EmployeeGridRow = React.createClass({
render : function(){
return (
<tr>
    <td>{this.props.item.AccountID}</td>
    <td>{this.props.item.AccountName}</td>
    <td>{this.props.item.SenderName}</td>
    <td>{this.props.item.SenderEmail}</td>
    <td>{this.props.item.ITEmailReceipients}</td>
    <td>{this.props.item.Active}</td>
</tr>
);
}
});

var EmployeeGridTable = React.createClass({
getInitialState: function(){
return {
items:[]
}
},
componentDidMount:function(){
@* Fetch data via ajax *@
$.get(this.props.dataUrl, function(data){
if(this.isMounted()){
this.setState({
items: data
});
}
}.bind(this));
},
render : function(){
var rows = [];
this.state.items.forEach(function(item){
rows.push(
<EmployeeGridRow key={item.AccountID} item={item} />);
});
return (
<table className="table table-bordered table-responsive">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Sender</th>
            <th>Email</th>
            <th>IT Support</th>
            <th>Active</th>
        </tr>
    </thead>
    <tbody>
        {rows}
    </tbody>
</table>);
}
});
ReactDOM.render(
<EmployeeGridTable dataUrl="/Home/GetEmployeeData" />,
document.getElementById('griddata')
);

Answer 1

您不应该提供这样的道具，实际上，您仅在其他组件中提供要实例化的类或函数时就在实例化该组件。

export default EmployeeGridTable;

在其他组件中：

<Route exact path='/' component={Intro} />
<Route exact path='/Home/GSC' component={() => <GSC dataUrl="/Home/GetEmployeeData" />} />

Answer 2

功能组件EmployeeGridRow接收props作为参数，因此要访问项目，它应该是props.item而不是this.props.item

更改

    function EmployeeGridRow() {
<tr>
    <td>{this.props.item.AccountID}</td>
    <td>{this.props.item.AccountName}</td>
    <td>{this.props.item.SenderName}</td>
    <td>{this.props.item.SenderEmail}</td>
    <td>{this.props.item.ITEmailReceipients}</td>
    <td>{this.props.item.Active}</td>
</tr>;
 }

收件人

    function EmployeeGridRow(props){
        <tr>
           <td>{props.item.AccountID}</td>
           <td>{props.item.AccountName}</td>
           <td>{props.item.SenderName}</td>
           <td>{props.item.SenderEmail}</td>
           <td>{props.item.ITEmailReceipients}</td>
           <td>{props.item.Active}</td>
      </tr>;
    }

在React中提供Ajax数据

2 个答案: