react 写左右联动

效果图：

 代码：

tsx:

import React, { Component, createRef } from 'react'
import './index.less'
interface Props {
}


interface Content {
  ID: string,
  text: string,
  top: number,
  height: number
}
interface Button {
  ID: string,
  text: string
}
interface State {
  ButtonList: Button[]
  ContentList: Content[],
  ButtonListIndex: number,
}
class Linkage extends Component<Props, State>{
  FnButtonList: Button[] = []
  FnContentList: Content[] = []
  right = createRef<HTMLDivElement>()
  linkageButtonItem = createRef<HTMLDivElement>()
  linkageButton = createRef<HTMLDivElement>()
  linkageButtonList = createRef<HTMLDivElement>()
  linkageContent = createRef<HTMLDivElement>()
  num: number = 0
  ScrollSwitch: boolean = true
  constructor(props: Props) {
    super(props)
    this.state = {
      ButtonList: [],
      ContentList: [],
      ButtonListIndex: 0,
    }
  }
  Getright() {
    return this.right.current