正文
简介主要实现的是根据我们的md的内容，来实现我们的左侧的标题的内容，我们一起看一下吧。
一、背景介绍#
当前，我们的文章采用的是markdown编辑的，今天我想实现根据我们的h1-h6不同的标题，实现我们的左侧的标题。
二、实现的思路#
将我们的左侧的标题存储在我们的store里面。之后，直接运行我们的组件，展示我们的标题。
三、具体的实现的代码#
在我们解析标题的时候，动态的增加我们的标题的内容：
const _state=store.getState(); let articleTitles=_state.articleTitles; articleTitles.push({title:nodeValue,level:level}); store.setState({ articleTitles:articleTitles })
在我们的左侧组件里面实现我们的业务逻辑：
class LeftArticleTitle extends React.Component{ // 构造方法 constructor(props){ super(props) this.state={ articleTitles:[] } } componentDidMount(){ let articleTitles=this.props.articleTitles; this.setState({ articleTitles:articleTitles }) } render(){ let dataList=this.state.articleTitles; //var dataList = [];//需要去重复的集合 var res = [];//去重复后的集合 var tem = {}; for(var i = 0; i < dataList.length; i++){ let key=tem[dataList[i].title]; if(key==null||undefined==key){ res.push(dataList[i]); tem[dataList[i].title]=1; } } //console.log(articleTitles) return( <div> <Card title={"文章目录"} className="left-article-title-parent" > { res.map((item,index)=>{ return( <span> {/* <Tag color={(index<=2)?"#FF4040":"#ABABAB"}>{index+1}</Tag> */} <div className="left-titles-item-a" keyvalue={item.title} > <a // href="javaScript:void(0);" href={`#${item.title}`} keyvalue={item.title} style={{color:"black"}} > {item.title} </a> </div> </span> ) }) } </Card> </div> ) } } const mapStateToProps = (state, ownProps) => { //console.log("mapStateToProps",state) return { articleTitles: state.articleTitles } } export default connect(mapStateToProps)(LeftArticleTitle)
这样，我们就实现了我们的左侧的标题的动态的展示 看一下效果：
