Question

我在下面呈现此代码以确保该代码有效。现在，它可以正常工作了，我正在尝试使用以下命令将其导出到“索引”页面：有人可以提供有关我如何导出它的指南吗？

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

Index.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站点。当我将其导出到Index.js文件时，该GSC网站似乎没有呈现。有什么想法为什么会发生以及如何解决？

Answer 1

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

如Tholle所说。

用AJAX导出react类

1 个答案: