ReactJs:为具有相同组件的选项卡维护单独的状态

Question

我在组件中使用选项卡结构，两个选项卡内部都有相同的组件。

如果单击“添加”按钮，则会将新组件添加到选项卡，现在如果我切换选项卡并转到选项卡 2，其中也包含相同的组件。

我尝试在下面的 fiddle 中复制场景。

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>
    );
  }
});

Answer 1

好吧，你只需要让 React 了解你的 2 个 Ticket 组件是不同的。

您可以通过向该组件添加虚拟属性来简单地实现此目的

<Tickets key="1/>

第一个选项卡和

<Tickets key="2/>

第二个。然后你将得到如你所期望的 2 次渲染;)

---

将门票作为 Prop 传递的完整答案

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'));