আমি সম্প্রতি প্রতিক্রিয়া শিখতে শুরু করেছি এবং আমার জ্ঞানটি কতটা এগিয়ে গেছে তা দেখার জন্য একটি ট্যাব তৈরি করতে চেয়েছিলাম। আমি এটি পেরিয়ে এসে রিডেক্স ছাড়াই কিছু বাস্তবায়ন করার সিদ্ধান্ত নিয়েছি। আমি একরকম অনুভব করি যে উত্তরগুলি কী অর্জন করতে চায় তা প্রতিফলিত করে না। তিনি কেবল একটি সক্রিয় উপাদান চান তবে এখানে উত্তরগুলি সমস্ত উপাদান সক্রিয় করে দেবে। আমি এটি একটি শট দেওয়া আছে।
নীচে একটি ট্যাব ফাইল রয়েছে
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;
ট্যাব ফাইল ...
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;
আপনার সূচক ফাইল ...
import React from 'react';
import ReactDOM from 'react-dom';
import Tabs from './components/tabs';
ReactDOM.render(
<Tabs />
, document.querySelector('.container'));
এবং সিএসএস
.tab-bar {
margin: 10px 10px;
border: 1px solid grey;
}
.active-tab {
border-top: 1px solid red;
}
এটি এমন কিছুর একটি কঙ্কাল যা আমি উন্নত করতে চাই তাই 4 এর বাইরে ট্যাববার্বার বৃদ্ধি করা CSS টি ভেঙে দেবে।
