我在一个组件中使用选项卡结构,两个选项卡内部都有相同的组件。
如果单击"添加"按钮,则会将新组件添加到选项卡,现在如果我切换选项卡并转到选项卡 2,其中也具有相同的组件。
我试图在下面的小提琴中复制场景。
https://jsfiddle.net/rzv6Lrjh/89/
var App = React.createClass({
render: function () {
return (
<div>
<Tabs selected={0}>
<Pane label="Tab 1">
<Tickets/>
</Pane>
<Pane label="Tab 2">
<Tickets/>
</Pane>
</Tabs>
</div>
);
}
});
好的,
所以你只需要让反应明白你的 2 个 Ticket 组件是不同的。
您可以通过向此组件添加虚拟属性来简单地实现此目的
<Tickets key="1/>
对于第一个选项卡和
<Tickets key="2/>
对于第二个。然后,您将有 2 个渲染,如您所期望;)
完整答案将门票作为道具传递
var Tabs = React.createClass({
displayName: 'Tabs',
propTypes: {
selected: React.PropTypes.number,
children: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.element
]).isRequired
},
getDefaultProps: function () {
return {
selected: 0
};
},
getInitialState: function () {
return {
selected: this.props.selected
};
},
shouldComponentUpdate(nextProps, nextState) {
return this.props !== nextProps || this.state !== nextState;
},
handleClick: function (index, event) {
event.preventDefault();
this.setState({
selected: index
});
},
_renderTitles: function () {
function labels(child, index) {
var activeClass = (this.state.selected === index ? 'active' : '');
return (
<li key={index}>
<a href="#"
className={activeClass}
onClick={this.handleClick.bind(this, index)}>
{child.props.label}
</a>
</li>
);
}
return (
<ul className="tabs__labels">
{this.props.children.map(labels.bind(this))}
</ul>
);
},
_renderContent: function () {
return (
<div className="tabs__content">
{this.props.children[this.state.selected]}
</div>
);
},
render: function () {
return (
<div className="tabs">
{this._renderTitles()}
{this._renderContent()}
</div>
);
}
});
var Pane = React.createClass({
displayName: 'Pane',
propTypes: {
label: React.PropTypes.string.isRequired,
children: React.PropTypes.element.isRequired
},
render: function () {
return (
<div>
{this.props.children}
</div>
);
}
});
var CreateTicket = React.createClass({
getInitialState: function() {
return{};
},
render: function() {
return(
<button type="button" onClick={this.props.createTicket} className="add-another-ticket">
+Add Ticket
</button>
);
}
});
var Tickets = React.createClass({
render: function() {
return (
<div>
{this.props.tickets}
<CreateTicket createTicket={this.props.onCreateTicket} />
</div>
);
}
});
var IndividualTicketInput = React.createClass({
getInitialState: function() {
return { ticket: {name: '', quantity: '', price: null} };
},
render: function() {
return (
<ul>
<li>
<label>Ticket Name</label>
<input className="ticket-name" type="text" placeholder="E.g. General Admission" value={this.state.ticket.name} />
</li>
<li>
<label>Quantity Available</label>
<input className="quantity" type="number" placeholder="100" value={this.state.ticket.quantity} />
</li>
<li>
<label>Price</label>
<input className="price" type="number" placeholder="25.00" value={this.state.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>
);
}
});
var App = React.createClass({
getInitialState: function() {
return {
tickets1: [(<IndividualTicketInput/>)],
tickets2: [(<IndividualTicketInput/>)]
}
},
onCreateTicket1: function() {
this.state.tickets1.push(<IndividualTicketInput/>);
},
onCreateTicket2: function() {
this.state.tickets2.push(<IndividualTicketInput/>);
},
render: function() {
return (
<div>
<Tabs selected={0}>
<Pane label="Tab 1">
<Tickets tickets={this.state.tickets1} onCreateTicket={this.onCreateTicket1.bind(this)}/>
</Pane>
<Pane label="Tab 2">
<Tickets tickets={this.state.tickets2} onCreateTicket={this.onCreateTicket2.bind(this)}/>
</Pane>
</Tabs>
</div>
);
}
});
ReactDOM.render(<App />, document.querySelector('.container'));