是的,你可以。
您可以在Tickets组件内部实现一个返回票据UI的html元素的函数。但是,我认为这不是最佳做法。因为,您应该将每个UI组件项目分割为React Component。
https://jsfiddle.net/rwnvt8vs/
ticket: function(ticket = {name: '', quantity: '', price: null}){
return (
<ul>
<li>
<label>Ticket Name</label>
<input className="ticket-name" type="text" placeholder="E.g. General Admission" value={ticket.name} />
</li>
<li>
<label>Quantity Available</label>
<input className="quantity" type="number" placeholder="100" value={ticket.quantity} />
</li>
<li>
<label>Price</label>
<input className="price" type="number" placeholder="25.00" value={ticket.price} />
</li>
<li>
<button type="button" className="delete-ticket" onClick={this.deleteTicket}><i className="fa fa-trash-o delete-ticket"></i></button>
</li>
</ul>
);
},
onClick: function() {
var newTicket = this.ticket();
var tickets = this.state.tickets.push(newTicket);
this.setState({tickets: tickets});
},
这是你想要的吗? https://jsfiddle.net/mayankshukla5031/07v7qfzo/我认为你不需要为按钮创建一个单独的组件,而不是在'state'中推入新的元素,只需要统计需要创建的子组件的数量。然后使用循环创建等于no的子组件。 –