J'ai commencé à apprendre React récemment et je voulais créer un onglet juste pour voir jusqu'où mes connaissances sont allées. Je suis tombé sur cela et j'ai décidé de mettre en œuvre quelque chose sans redux. J'ai l'impression que les réponses ne reflètent pas ce que l'OP veut réaliser. Il ne veut qu'un seul composant actif, mais les réponses ici définiront tous les composants actifs. Je lui ai donné une chance.
Ci-dessous un fichier onglet
import React, { Component } from 'react';
class Tab extends Component {
render(){
const tabClassName = "col-xs-3 tab-bar";
const activeTab = this.props.activeKey === this.props.keyNumber ? "active-tab" : null;
return (
<div
className = {`${tabClassName} ${activeTab}`}
onClick={()=>this.props.onClick(this.props.keyNumber)}
>
I am here
</div>
);
}
}
export default Tab;
Le fichier des onglets ...
import React, { Component } from 'react';
import Tab from './tab';
class Tabs extends Component {
constructor(props){
super(props);
this.state = {
currentActiveKey: 0,
tabNumber: 2
};
this.setActive = this.setActive.bind(this);
this.setTabNumber = this.setTabNumber.bind(this);
}
setTabNumber(number){
this.setState({
tabNumber: number
});
}
setActive (key){
this.setState({
currentActiveKey: key
});
}
render(){
let tabs = [];
for(let i = 0; i <= this.state.tabNumber; i++){
let tab = <Tab key={i} keyNumber={i} onClick={this.setActive} activeKey={this.state.currentActiveKey}/>;
tabs.push(tab);
}
return (
<div className="row">
{tabs}
</div>
);
}
}
export default Tabs;
votre fichier d'index ...
import React from 'react';
import ReactDOM from 'react-dom';
import Tabs from './components/tabs';
ReactDOM.render(
<Tabs />
, document.querySelector('.container'));
et le css
.tab-bar {
margin: 10px 10px;
border: 1px solid grey;
}
.active-tab {
border-top: 1px solid red;
}
Ceci est un squelette de quelque chose que je veux améliorer, donc augmenter le tabNumber au-delà de 4 cassera le css.
