Создать ссылку на действие контроллера в строках таблицы?

Question

Я пытаюсь создать строку для каждого дочернего элемента (

) в таблице, чтобы вызвать действие в моем контроллере.Не знаю, как это сделать, я знаю, что это делается с помощью ActionLink только в Razor Views, но я пытаюсь сделать это внутри самого скрипта ReactJS.Я создал другой вопрос ранее, но подумал, что создам его с тем, что, как я думал, может быть более актуальным кодом.Я могу удалить другой вопрос.Цель состоит в том, чтобы позволить строке таблицы, которую React отображает как один из множества перечисляемых элементов в коллекции, быть доступными для щелчка, и перенаправить на другой контроллер, который отображает дочерние элементы этого элемента.Нажмите на строку таблицы, представляющую тикет -> перенаправить на страницу, на которой представлены журналы, связанные с тикетом, и другие подробности на иерархическом уровне самого тикета.

Я попытался найти несколько учебных пособий по ReactJS и ReactJS.Net MVC.,Хотя эти учебные пособия отлично подходят для объяснения операций CRUD, они не охватывают, как создать простую ссылку, обертывающую строку таблицы в заданной HTML-таблице элементов, отображаемых React.Я понял, что мне, вероятно, нужен атрибут onClick для другого поста, хотя я открыт и для других предложений.Я также видел сообщения, которые используют тег при создании ссылки на элемент React, но кажется, что требуется импорт, который невозможен без Webpack?Есть ли способ, которым я могу осуществить это БЕЗ Webpack?

Queue.jsx (страница, которая показывает билеты в таблице HTML):

class Queue extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: this.props.initialData };
        this.handleTicketLoad = this.handleTicketLoad.bind(this);
    }
    loadTicketsFromServer() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = () => {
            const data = JSON.parse(xhr.responseText);
            this.setState({ data: data });
        };
        xhr.send();
    }
    handleTicketLoad(ticket) {

        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.getUrl + ticket.id, true);
        xhr.send();
    }
    componentDidMount() {
        window.setInterval(() => this.loadTicketsFromServer(), this.props.pollInterval);
    }
    render() {
        return (
            <div className="queue">
                <h1>Affirm Queue</h1>



                <TicketList data={this.state.data} />

            </div>
        );
    }
}

class TicketList extends React.Component {
    render() {
        const ticketNodes = this.props.data.map(ticket => (
            <Ticket key={ticket.id} ticketLoad={this.handleTicketLoad}>

                    <td>{ticket.summary}</td> < td > { ticket.description }</td><td>{ticket.currentApptTime}</td>

            </Ticket>
        ));
        const ticketRaw = this.props.data.map(ticket => (
            <tr>
                    <td>{ticket.summary}</td><td>{ticket.id}</td><td>{ticket.description}</td><td>{ticket.currentApptTime}</td>
                </tr>
        ));
        return (
            <div className="ticketList">

                <table id="affirmTable" className="table table-bordered table-hover table-striped">
                    <tbody>
                        {ticketNodes}
                        </tbody>
                </table>
            </div>
        );
    }
}

function createRemarkable() {
    var remarkable = (("undefined" != typeof global) && (global.Remarkable)) ? global.Remarkable : window.Remarkable;
    return new remarkable();
}

class Ticket extends React.Component {
    rawMarkup() {
        var md = createRemarkable();
        var rawMarkup = md.render(this.props.children.toString());
        return { __html: rawMarkup };
    }
    render() {
        return (

            <tr className="ticket" onClick={this.ticketLoad}>


                        {React.Children.map(this.props.children, (child, i) => {
                            // Ignore the first child
                            return child
                        })}

                </tr>


        );
    }
}

Код, который отображает элемент "Queue" React вRazor view:

<div class="jumbotron">
        @Html.React("Queue", new
   {
       initialData = Model,
       getUrl = Url.Action("Ticket"),
       pollInterval = 2000,
   })
        <div id="content"></div>
    </div>

TicketController.cs (контроллер с действием, на которое я надеюсь перенаправить):

public class TicketController : Controller
{
    private static readonly IList<ApptConfirmItem> logs;

    private static readonly IEnumerable<ApptConfirmItem> combined;

    private static readonly IEnumerable<ApptTaskTicket> ticketList;

    static TicketController()
    {
        logs = new List<ApptConfirmItem>();

        combined = logs;

        ticketList = (List<ApptTaskTicket>)System.Web.HttpContext.Current.Application["taskTickets"];

        //logs.Concat(addAppts);
    }
    // GET: Queue
    public ActionResult Ticket(Guid ticketId)
    {

        return View(ticketList.Single(a => a.id == ticketId));
    }

В приведенных выше примерах я ожидаю "onLoad"Атрибут строки таблицы внутри компонента Ticket для связи с родительским компонентом для вызова запроса GET и эффективной визуализации страницы, которая поддерживается контроллером билетов.Вместо этого React игнорирует атрибут, и я не вижу атрибута onClick, отображаемого на странице вообще.Кто-нибудь может дать мне знать, чего мне здесь не хватает?