Rox Menu

import { useState } from 'react'
import { Menu2 } from 'rox-react-menu'

const data = [
	{
		PID_: '1',
		ID_: 'c961b57354d94fa4bb1d4966db3a5b26',
		LINK_ID_: '81a368e8d2f64977aed745ab50e8a1b5',
		CHAPTER_: '1',
		NAME_: '前言',
		LEVEL_: '1',
		CHILDREN: [
			{
				PID_: 'c961b57354d94fa4bb1d4966db3a5b26',
				ID_: '21a2ac1fff3745778c739759e5fbdc6c',
				LINK_ID_: '77fbea99b809491089cc565dde03b05a',
				CHAPTER_: '1.1',
				NAME_: '前言',
				LEVEL_: '2',
				CHILDREN: [
					{
						PID_: '21a2ac1fff3745778c739759e5fbdc6c',
						ID_: '5587bb7cf4a543a6b1d50343c8a6a275',
						LINK_ID_: '56c9f4076e85498ba0219e0d99d1693a',
						CHAPTER_: '1.1.1',
						NAME_: '前言',
						LEVEL_: '3',
					},
				],
			},
		],
	},
	{
		PID_: '1',
		ID_: '60db7f593fc949ab8f80c83d043c9180',
		LINK_ID_: 'c7c3b99dc78e4c8099afeb3524d69924',
		CHAPTER_: '2',
		NAME_: '手册说明',
		LEVEL_: '1',
		CHILDREN: [
			{
				PID_: '60db7f593fc949ab8f80c83d043c9180',
				ID_: 'd6e69f443400414292fe55cc1d68bea8',
				LINK_ID_: 'f9cda71e3a0d478886166c2d3d86a65e',
				CHAPTER_: '2.1',
				NAME_: '手册说明',
				LEVEL_: '2',
				CHILDREN: [
					{
						PID_: 'd6e69f443400414292fe55cc1d68bea8',
						ID_: 'b6fc3014d8e74805a06daede198a5f08',
						LINK_ID_: '8724ecefc0d2463f9d05ea5947c9a992',
						CHAPTER_: '2.1.1',
						NAME_: '手册说明',
						LEVEL_: '3',
					},
				],
			},
		],
	},
	{
		PID_: '1',
		ID_: 'e3ad043c3d7c4938ab390e98f00b4d1d',
		LINK_ID_: '2c3c03c551fe42e584bb0de7c36cdd38',
		CHAPTER_: '3',
		NAME_: '图片索引',
		LEVEL_: '1',
		CHILDREN: [
			{
				PID_: 'e3ad043c3d7c4938ab390e98f00b4d1d',
				ID_: '2388e4f46b2346dc97339066fd9412e6',
				LINK_ID_: '127e677a8f5f45b4b28a9a0a16d9935f',
				CHAPTER_: '3.1',
				NAME_: '车外',
				LEVEL_: '2',
				CHILDREN: [
					{
						PID_: '2388e4f46b2346dc97339066fd9412e6',
						ID_: '4e37a9c4ac9c466eb6f14278bdf1e272',
						LINK_ID_: 'acd4547f61b64c16ba83dad232c23515',
						CHAPTER_: '3.1.1',
						NAME_: '车外',
						LEVEL_: '3',
					},
				],
			},
			{
				PID_: 'e3ad043c3d7c4938ab390e98f00b4d1d',
				ID_: 'f092908a36a744928677fe525409f332',
				LINK_ID_: '96ca6ade4b9a4266b0aa441dae4fb312',
				CHAPTER_: '3.2',
				NAME_: '车内',
				LEVEL_: '2',
				CHILDREN: [
					{
						PID_: 'f092908a36a744928677fe525409f332',
						ID_: '920c7bee325f4cc7bf2c58fee8fb4476',
						LINK_ID_: 'b9cc5801df524ffebae7daf6ed5041c4',
						CHAPTER_: '3.2.1',
						NAME_: '车内',
						LEVEL_: '3',
					},
				],
			},
		],
	},
]

function App() {
	const [active, setActive] = useState('')
	return (
		<div style={{ width: '400px', borderRight: '1px solid blue' }}>
			<Menu2
				data={data}
				childField='CHILDREN'
				itemStyle={{ padding: '10px 20px' }}
				nestPadding='15px'
				active={active}
				onChange={(item, index) => {
					console.log('onchange', index)
					setActive(index)
				}}
				onClick={(item, isLast, index) => {
					console.log('onclick', isLast, index)
				}}
				renderItem={(item, index) => (
					<div style={{ fontSize: '18px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
						{item.CHAPTER_} {item.NAME_}
					</div>
				)}
			/>
		</div>
	)
}

export default App