ReactJs：为具有相同组件的选项卡保持单独状态

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

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

我试着在下面的小提琴中复制这个场景

var-App=React.createClass({
渲染：函数（）{
返回(
);
}
});

好的，所以您只需让react了解您的两个票据组件是不同的

您可以简单地通过向该组件添加虚拟属性来实现这一点

<Tickets key="1/>

第二个。然后，您将有两个预期的渲染；）

---

完成答案，将票作为道具传递

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

var Tabs=React.createClass({
displayName:“选项卡”，
道具类型：{
选中：React.PropTypes.number，
儿童：React.PropTypes.oneOfType([
React.PropTypes.array，
React.PropTypes.element
]).需要
},
getDefaultProps:函数（）{
返回{
已选：0
};
},
getInitialState:函数（）{
返回{
已选择：this.props.selected
};
},
shouldComponentUpdate（下一步，下一步状态）{
返回this.props！==nextrops | | this.state！==nextState；
},
handleClick：函数（索引、事件）{
event.preventDefault（）；
这是我的国家({
选定：索引
});
},
_渲染器：函数（）{
函数标签（子项、索引）{
var activeClass=（this.state.selected==索引？'active'：''）；
返回(


);
}
返回(

{this.props.children.map（labels.bind（this））}

);
},
_renderContent:函数（）{
返回(
{this.props.children[this.state.selected]}
);
},
渲染：函数（）{
返回(
{this.\u renderitles（）}
{this.\u renderContent（）}
);
}
});
var Pane=React.createClass({
displayName:“窗格”，
道具类型：{
标签：React.PropTypes.string.isRequired，
子项：React.PropTypes.element.isRequired
},
渲染：函数（）{
返回(
{this.props.children}
);
}
});
var CreateTicket=React.createClass({
getInitialState:函数（）{
返回{}；
},
render:function（）{
返回(
+加票
);
}
});
var Tickets=React.createClass({
render:function（）{
返回(
{这个。道具。票}
);
}
});
var IndividualTicketInput=React.createClass({
getInitialState:函数（）{
返回{票证：{名称：''，数量：''，价格：空}；
},
render:function（）{
返回(


票名


可用数量


价格




);
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{
票证1:[（）]，
票务2:[（）]
}
},
onCreateTicket1:function（）{
this.state.tickets1.push（）；
},
onCreateTicket2:function（）{
this.state.tickets2.push（）；
},
render:function（）{
返回(
);
}
});
ReactDOM.render（，document.querySelector（'.container'）；
不一定了解您想要什么，但是我认为您应该考虑将“TigKEtLIST”发送为票券组件的属性，并在顶级组件级别维护2个不同的列表。state@AshKander你能看看我添加的小提琴吗，问题是两个标签都有相同的组件，所以如果我在标签1中对组件做一些更改，表2也反映了同样的情况。谢谢，它起作用了。一个小问题。如果我单击“在选项卡1中添加”并转到选项卡2，它工作正常，但当我从选项卡2切换到选项卡1时，它的状态与选项卡2相同
<Tickets key="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'));