选项卡,插槽效果阶段案例-6

最新推荐文章于 2023-03-30 15:35:45 发布

原创最新推荐文章于 2023-03-30 15:35:45 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端

React 专栏收录该内容

9 篇文章

订阅专栏

本文通过实例展示了在React中如何实现选项卡功能，并探讨了与Vue中的插槽不同，React利用jsx直接传递数据的方式实现类似效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选项卡案例

在这里插入图片描述
style.css

.tab-control{
	display: flex;
	line-height: 44px;
	text-align: center;
}

.tab-item{
	flex: 1;
}
.tab-item span{
	padding: 5px 8px;
}
.tab-item.active{
	color: red;
}
.tab-item.active span{
	border-bottom: 3px solid red;	
}

App.js

import React, { Component } from 'react'
import TabControl from './TabControl'

export default class App extends Component {
	render() {
		return (
			<div>
				<TabControl titles={['流行','新款','精选']}/>
			</div>
		)
	}
}

TabControl.js

import React, { Component } from 'react';
import PropTypes from 'prop-types'

export default class TabControl extends Component {
	constructor(props){
		super(props);
		this.state={
			currentIndex:0
		}
	}
	render() {
		const { titles } = this.props;
		const {currentIndex}=this.state;
		return (
			<div className="tab-control">
				{
					titles.map((item,index)=>{
						return (
				            <div
				              key={item}
				              className={"tab-item " + (index === currentIndex ? "active" : "")}
				              onClick={(e) => this.itemClick(index)}
				            >
				              <span>{item}</span>
				            </div>
	          			);
					})
				}
			</div>
		)
	}
	itemClick(index){
		this.setState({
			currentIndex:index
		})
	}
}

TabControl.propTypes={
	titles:PropTypes.array.isRequired
}

点击某一个选项，父组件有对应文本的改变。
告诉父组件，当前选中的哪一个，父组件根据选中的选项对应显示内容。
子组件里面有对应的index，把index传递给父组件，父组件就可以取出对应的值。
在这里插入图片描述

App.js

import React, { Component } from 'react'
import TabControl from './TabControl'

export default class App extends Component {
	constructor(props){
		super(props);
		this.titles = ["流行", "新款", "精选"];
		// 可能会更新的数据放在state中
		this.state={
			currentTitle:"流行"
		}
	}
	render() {
		const {currentTitle}=this.state;
		return (
	      <div>
	        <TabControl
	          titles={this.titles}
	          titleClick={(index) => this.titleClick(index)}
	        />
	        <h2>{currentTitle}</h2>
	      </div>
   		);
	}
	titleClick(index){
		this.setState({
			currentTitle:this.titles[index]
		})
	}
}

TabControl.js

import React, { Component } from 'react';
import PropTypes from 'prop-types'

export default class TabControl extends Component {
	constructor(props){
		super(props);
		this.state={
			currentIndex:0
		}
	}
	render() {
		const { titles } = this.props;
		const {currentIndex}=this.state;
		return (
			<div className="tab-control">
				{
					titles.map((item,index)=>{
						return (
				            <div
				              key={item}
				              className={"tab-item " + (index === currentIndex ? "active" : "")}
				              onClick={(e) => this.itemClick(index)}
				            >
				              <span>{item}</span>
				            </div>
	                   );
					})
				}
			</div>
		)
	}
	itemClick(index){
		const {titleClick}=this.props;
		this.setState({
			currentIndex:index
		});
		titleClick(index);
	}
}

TabControl.propTypes={
	titles:PropTypes.array.isRequired
}

插槽效果案例

没有vue中的slot概念，react中不需要插槽，jsx可以当成变量和数据直接传递。用this.props.chidren。
在这里插入图片描述

App.js

import React, { Component } from 'react'
import NavBar from './NavBar'
import NavBar2 from "./NavBar2";

export default class App extends Component {
	render() {
		return (
	      <div>
	        <NavBar>
	          <span>111</span>
	          <span>222</span>
	          <span>333</span>
	        </NavBar>
	        <NavBar2 leftSlot={<span>111</span>}
					 centerSlot={<span>222</span>}
					 rightSlot={<span>333</span>} />
	      </div>
       );
	}
}

NavBar.js

import React, { Component } from 'react'

export default class NavBar extends Component {
	render() {
		return (
	      <div className="nav-bar">
	        <div className="nav-left">{this.props.children[0]}</div>
	        <div className="nav-center">{this.props.children[1]}</div>
	        <div className="nav-right">{this.props.children[2]}</div>
	      </div>
        );
	}
}

NavBar2.js

import React, { Component } from "react";

export default class NavBar extends Component {
  render() {
	const { leftSlot, centerSlot, rightSlot } = this.props;
    return (
      <div className="nav-bar">
        <div className="nav-left">{leftSlot}</div>
        <div className="nav-center">{centerSlot}</div>
        <div className="nav-right">{rightSlot}</div>
      </div>
    );
  }
}