Блог

Главная - Вопросы по программированию - экспорт класса react с помощью AJAX

экспорт класса react с помощью AJAX

#asp.net-mvc #reactjs #react-router

#asp.net-mvc #reactjs #react-маршрутизатор

Вопрос:

У меня есть приведенный ниже код, который визуализируется, чтобы убедиться, что код работает. Теперь, когда у меня это работает, я пытаюсь экспортировать его на свою индексную страницу, используя следующее: . Может кто-нибудь, пожалуйста, дать рекомендации относительно того, как мне его экспортировать?

 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. Похоже, что этот сайт GSC не отображается, когда я экспортирую его в Index.js файл. Есть идеи о том, почему это происходит и как с этим справиться?

Комментарии:

1. Не очень понятно, о чем вы спрашиваете. Не могли бы вы уточнить? Вы имеете в виду, как вы экспортируете EmployeeTable компонент и импортируете его куда-то еще ?

2. Точно, однако, если вы посмотрите на нижнюю часть кода, у меня есть prop, и он ищет элемент div, который находится в другом html.

3. Хорошо. С чем вы боретесь? Разве это не работает в вашем приложении, если вы экспортируете компонент и визуализируете его где-то еще?

4. Это не работает. На моей индексной странице я использую это: <Route exact path=’/Home/GSC’ component={GSC} />. Но, похоже, это не работает. я пропустил шаг или не понимаю, как передать класс с помощью prop: <URL-адрес EmployeeTable=»GetEmployeeData» />.?

5. А, понятно. Вы должны указать, что именно это вы пытаетесь сделать в своем вопросе. Вместо этого вы можете использовать render prop: <Route exact path='/Home/GSC' render={() => <EmployeeTable url="GetEmployeeData" />} />

Ответ №1:

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

Как указано Tholle.