React 基礎(chǔ)鞏固(十九)——組件化開(kāi)發(fā)（三）
組件通信小案例
- Main.jsx
import React, { Component } from "react";
import TabControl from "./TabControl";
export class Main extends Component {
constructor() {
super();
this.state = {
titles: ["流行", "新款", "精選"],
tabIndex: 0,
};
}
tabClick(index) {
this.setState({
tabIndex: index,
});
}
render() {
const { titles, tabIndex } = this.state;
return (
<div>
<TabControl titles={titles} tabClick={(i) => this.tabClick(i)} />
<h1>{titles[tabIndex]}</h1>
</div>
);
}
}
export default Main;
- TabControl/index.jsx
import React, { Component } from "react";
import "./style.css";
export class TabControl extends Component {
constructor() {
super();
this.state = {
currentIndex: 0,
};
}
itemClick(index) {
this.setState({ currentIndex: index });
this.props.tabClick(index);
}
render() {
const { titles } = this.props;
const { currentIndex } = this.state;
return (
<div className="tab-control">
{titles.map((item, index) => {
return (
<div
className={`item ${currentIndex === index ? "active" : ""}`}
key={item}
onClick={(e) => this.itemClick(index)}
>
<span className="text">{item}</span>
</div>
);
})}
</div>
);
}
}
export default TabControl;
- TabControl/style.css
.tab-control {
display: flex;
align-items: center;
height: 40px;
text-align: center;
}
.tab-control .item {
flex: 1;
}
.tab-control .item.active {
color: red;
}
.tab-control .item.active .text {
padding: 3px;
border-bottom: 3px solid red;
}
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-549292.html
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-549292.html
到了這里，關(guān)于【前端知識(shí)】React 基礎(chǔ)鞏固(十九)——組件化開(kāi)發(fā)（三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
