【前端知识】React 基础巩固(十九)——组件化开发（三）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端知识】React 基础巩固(十九)——组件化开发（三）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React 基础巩固(十九)——组件化开发（三）

组件通信小案例

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