我正在尝试为表中的每个子元素(
我尝试查找关于ReactJS和ReactJS.Net MVC的一些教程。尽管这些教程非常适合于解释CRUD操作,但它们并未涵盖如何创建一个简单的链接,该链接将表行包装在React呈现的给定HTML元素表中。我发现我可能需要的是每篇文章的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>
);
}
}
在Razor视图中呈现“ Queue” React div的代码:
<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));
}
在上面的给定示例中,我希望Ticket组件内表行的“ onLoad”属性链接到父组件,以便调用GET请求并有效地呈现Ticket维护的页面控制器。相反,React似乎忽略了该属性,而且我完全看不到页面上呈现的onClick属性。谁能让我知道我在这里可能会想念什么?