使用 AJAX 导出反应类答案

【问题标题】：exporting react class with AJAX使用 AJAX 导出反应类
【发布时间】：2024-05-29 15:00:02
【问题描述】：

我在下面渲染了这段代码，以确保代码正常工作。现在我已经开始工作了，我正在尝试使用以下命令将它导出到我的索引页面中：有人可以就我如何导出它提供指导吗？

class EmployeeRow extends React.Component {
    render() {
        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>
        );
    }
} 
 class EmployeeTable extends React.Component {
    state = {
        result: []
    }

    render() {
        var rows = [];
        this.state.result.forEach(function (item) {
            rows.push(<EmployeeRow key={item.AccountID} item={item} />);
        });
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>EmployeeID</th>
                        <th>FirstName</th>
                        <th>LastName</th>
                        <th>Gender</th>
                        <th>Designation</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tbody>
                    {rows}
                </tbody>
        </table>);
    }

    componentDidMount() {
        var xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = function () {
            var response = JSON.parse(xhr.responseText);
            this.setState({ result: response });
        }.bind(this);
        xhr.send();
    }
}

ReactDOM.render(<EmployeeTable url="GetEmployeeData" />,
    document.getElementById('griddata')
);

索引.js

import React, {Component, Fragment} from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import GSC from './GSC';
import Intro from './Intro';

class App extends Component {
    render() {
        return (
            <Router>
            <div className="App">

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

            </div>
            </Router>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

如您所见，我使用的是路由器，因此当用户在索引页面上时，它会从那里显示一条消息。当用户点击一个 URL 时，它会将他们带到 /Home/GSC 站点。当我将这个 GSC 站点导出到 Index.js 文件时，它似乎没有呈现。关于为什么会发生这种情况以及如何解决的任何想法？

【问题讨论】：

不太清楚你在问什么。你能详细说明一下吗？ Do you mean how you export the EmployeeTable component and import it somewhere else?
没错，但是如果您查看代码的底部，我有一个道具，它正在寻找不同 html 上的 div 项目。
好的。你在挣扎什么？如果您将组件导出并在其他地方呈现，它在您的应用程序中不起作用吗？
它不工作。在我的索引页面上，我使用的是：。但这似乎不起作用。我错过了一步还是不明白如何使用道具传递一个类：.？
啊，我明白了。您应该在问题中包含您要尝试做的事情。您可以改用渲染道具：<Route exact path='/Home/GSC' render={() => <EmployeeTable url="GetEmployeeData" />} />

标签： asp.net-mvc reactjs react-router

【解决方案1】：

<Route exact path='/Home/GSC' render={() => <EmployeeTable url="GetEmployeeData" />} />

正如 Tholle 所说。

【讨论】：