简易的数控组件

组件的封装

import React, { useState } from 'react';
export default function Demo(props) {
    console.log(props);
    // let { data } = props
    console.log(props)
    let { data } = props
    let [arr, setArr] = useState([])
    const handel = (i) => {

        console.log(i);
        if (arr.includes(i)) {
            let a = arr.filter(v => {
                return v !== i
            })

            setArr([...a])
            console.log(a);

        } else {
            setArr([...arr, i])
            console.log(arr);
        }

    }

    return (
        <div>
            {
                data.map((v, i) => {
                    return (
                        <div key={i}>
                            {v.children && arr.includes(i) ? <div>
                                <div onClick={() => { handel(i) }}>{v.label}</div>
                                <Demo data={v.children}></Demo>
                            </div>
                                : <div onClick={() => { handel(i) }}>{v.label}</div>}
                        </div>
                    )
                })
            }
        </div >
    )
}

使用组件

import React from 'react'



import Demo from './Demo'

let data = [{
  label: '一级 1',
  children: [{
      label: '二级 1-1',
      children: [{
          label: '三级 1-1-1'
      }]
  }]
}, {
  label: '一级 2',
  children: [{
      label: '二级 2-1',
      children: [{
          label: '三级 2-1-1'
      }]
  }, {
      label: '二级 2-2',
      children: [{
          label: '三级 2-2-1'
      }]
  }]
}, {
  label: '一级 3',
  children: [{
      label: '二级 3-1',
      children: [{
          label: '三级 3-1-1'
      }]
  }, {
      label: '二级 3-2',
      children: [{
          label: '三级 3-2-1'
      }]
  }]
}]


export default function App() {

  return (
    <div>
   <Demo data={data} />
    </div>
  )
}