react实现tab切换
鉴于看了网上都不少文章都没有完整的描述完一个demo，个人借助react实现了一个供大家参考下。
parents.js组件
import React from 'react';
import './BehaviorListModal.scss';
import Title from './component/Title'
import Content from './component/Content'
class BehaviorListModal extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
id: 505,
content: `<p>作为开发者，我们经常都会使用各种优秀的开源库；与此同时，我们也可能是库的提供者，不管是我们提供给公司内部使用的库，亦或是个人主导或参与的各种开源项目。一个优秀的库固然有很多的的特质，在日常的开发中，我们也自然会遇到一些不是那么开发体验友好的库。
作为 Java 开发者，我个人体感最强的是运行时的 LinkageError 。每遇到这样的问题，我就需要检查包的依赖，结合 MavenHelper 做各种升级、排包、继续测试等工作。而这一问题的根源则是因为“二进制不兼容性”。本文将结合开源项目中的一些好的实践，以及个人的开发经验和大家做一点分享，抛砖引玉。
作为开发者，我们经常都会使用各种优秀的开源库；与此同时，我们也可能是库的提供者，不管是我们提供给公司内部使用的库，亦或是个人主导或参与的各种开源项目。一个优秀的库固然有很多的的特质，在日常的开发中，我们也自然会遇到一些不是那么开发体验友好的库。作为 Java 开发者，
我个人体感最强的是运行时的 LinkageError 。每遇到这样的问题，我就需要检查包的依赖，结合 MavenHelper 做各种升级、排包、继续测试等工作。而这一问题的根源则是因为“二进制不兼容性”。本文将结合开源项目中的一些好的实践，以及个人的开发经验和大家做一点分享，抛砖引玉。作为开发者，
我们经常都会使用各种优秀的开源库；与此同时，我们也可能是库的提供者，不管是我们提供给公司内部使用的库，亦或是个人主导或参与的各种开源项目。
一个优秀的库固然有很多的的特质，在日常的开发中，我们也自然会遇到一些不是那么开发体验友好的库。作为 Java 开发者，我个人体感最强的是运行时的 LinkageError 。每遇到这样的问题，我就需要检查包的依赖，结合 MavenHelper 做各种升级、排包、继续测试等工作。而这一问题的根源则是因为“二进制不兼容性”。
本文将结合开源项目中的一些好的实践，以及个人的开发经验和大家做一点分享，抛砖引玉。作为开发者，我们经常都会使用各种优秀的开源库；与此同时，我们也可能是库的提供者，不管是我们提供给公司内部使用的库，亦或是个人主导或参与的各种开源项目。一个优秀的库固然有很多的的特质，在日常的开发中，我们也自然会遇到一些不是那么开发体验友好的库。
作为 Java 开发者，我个人体感最强的是运行时的 LinkageError 。每遇到这样的问题，我就需要检查包的依赖，结合 MavenHelper 做各种升级、排包、继续测试等工作。而这一问题的根源则是因为“二进制不兼容性”。本文将结合开源项目中的一些好的实践，以及个人的开发经验和大家做一点分享，抛砖引玉。作为开发者，我们经常都会使用各种优秀的开源库；
与此同时，我们也可能是库的提供者，不管是我们提供给公司内部使用的库，亦或是个人主导或参与的各种开源项目。一个优秀的库固然有很多的的特质，在日常的开发中，我们也自然会遇到一些不是那么开发体验友好的库。作为 Java 开发者，我个人体感最强的是运行时的 LinkageError 。每遇到这样的问题，我就需要检查包的依赖，
结合 MavenHelper 做各种升级、排包、继续测试等工作。而这一问题的根源则是因为“二进制不兼容性”。本文将结合开源项目中的一些好的实践，以及个人的开发经验和大家做一点分享，抛砖引玉。作为开发者，我们经常都会使用各种优秀的开源库；与此同时，我们也可能是库的提供者，不管是我们提供给公司内部使用的库，亦或是个人主导或参与的各种开源项目。
一个优秀的库固然有很多的的特质，在日常的开发中，我们也自然会遇到一些不是那么开发体验友好的库。作为 Java 开发者，我个人体感最强的是运行时的 LinkageError 。每遇到这样的问题，我就需要检查包的依赖，结合 MavenHelper 做各种升级、排包、继续测试等工作。而这一问题的根源则是因为“二进制不兼容性”。本文将结合开源项目中的一些好的实践，以及个人的开发经验和大家做一点分享，抛砖引玉。</p>`,
showStartTime: 1611220252000,
createdAt: 1611220252000,
title: "<p style='color:red'>八大红线八大红线八大红线八大红线</p>",
noticeRecordId: 459248,
readStatus: 1,
urgent: 1,
stick: 1,
tag: 1,
tagName: "薪资补贴",
},
{
id:504,
content: "<p>115</p>",
showStartTime: 1611220189000,
createdAt: 1611220189000,
title: "<p style='color:red'>八大红线八大红线</p>",
noticeRecordId: 459249,
readStatus: 1,
urgent: 1,
stick: 1,
tag: 1,
tagName: "薪资补贴"
},
{
id:504,
content: "<p>115</p>",
showStartTime: 1611220189000,
createdAt: 1611220189000,
title: "<p style='color:red'>115</p>",
noticeRecordId: 459249,
readStatus: 1,
urgent: 1,
stick: 1,
tag: 1,
tagName: "薪资补贴"
},
{
id:504,
content: "<p>115</p>",
showStartTime: 1611220189000,
createdAt: 1611220189000,
title: "<p style='color:red'>115</p>",
noticeRecordId: 459249,
readStatus: 1,
urgent: 1,
stick: 1,
tag: 1,
tagName: "薪资补贴"
},
{
id:504,
content: "<p>115</p>",
showStartTime: 1611220189000,
createdAt: 1611220189000,
title: "<p style='color:red'>115</p>",
noticeRecordId: 459249,
readStatus: 1,
urgent: 1,
stick: 1,
tag: 1,
tagName: "薪资补贴"
},
{
id:504,
content: "<p>115</p>",
showStartTime: 1611220189000,
createdAt: 1611220189000,
title: "<p style='color:red'>115</p>",
noticeRecordId: 459249,
readStatus: 1,
urgent: 1,
stick: 1,
tag: 1,
tagName: "薪资补贴"
},{
id:504,
content: "<p>11521321</p>",
showStartTime: 1611220189000,
createdAt: 1611220189000,
title: "<p style='color:red'>115</p>",
noticeRecordId: 459249,
readStatus: 1,
urgent: 1,
stick: 1,
tag: 1,
tagName: "薪资补贴"
}
],
active: ''
};
}
handleActive = index => {
this.setState({
active: index
});
};
render() {
const { list, active } = this.state;
return (
<div className="teacherListBehavior">
<div className="title">
<span>讲师行为规范</span>
</div>
<div className="container">
<div className="noticeList">
<div className="col">
<Title
list={list}
active={active}
callback={this.handleActive.bind(this)}
/>
</div>
<div className="col">
<Content
list={list}
active={active}
/>
</div>
</div>
</div>
</div>
);
}
}
export default BehaviorListModal;
两个子组件，一个title.js和一个comtent.js
import React from 'react'
import './Title.scss';
function Title(props) {
const { list, active } = props
const bgChange = index => {
props.callback(index)
};
const textFilter = val => {
if (val.length <= 8) {
return val
} else {
return val.substring(0, 8) + '...'
}
}
return (
<div className="behavior-title">
{list.map((value, index) => {
const liClass = active === index ? 'active' : '';
return (
<div
className={`left-li ${liClass}`}
key={index}
onClick={() => {
bgChange(index);
}}
>
{textFilter(value.title.replace(/<\/?[^>]*>/g,''))}
</div>
);
})}
</div>
)
}
export default Title
import React from 'react'
import './Content.scss';
function Content(props) {
const { list, active } = props
return (
<div className="contents">
{list.map((value, index) => {
const liShow = active === index ? 'show' : 'notShow';
return (
<div
className={`${liShow}`}
key={index}
>
{value.content.replace(/<\/?[^>]*>/g,'')}
</div>
);
})}
</div>
)
}
export default Content
css部分 title.scss和content.scss
title.scss
.behavior-title{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 400;
color: #333333;
letter-spacing:1.5px;
.left-li{
height:56px;
line-height: 56px;
padding: 0px 0px 0px 20px;
}
.active{
border-left: 3px solid #F32735;
color: #EF4C4F;
font-weight: 600;
}
}
content.scss部分
.contents{
text-indent:25px;
.show{
display: block;
}
.notShow{
display: none;
}
}
