1.0.0 • Published 3 years ago
react-recursive-renderer v1.0.0
react-recursive-renderer
递归渲染react的嵌套内容 | recursive render nested components with react
使用 | usage
import { FC } from "react"
import Container, { RecursiveProps } from "../lib"
// recursively render `Ul` and it will get props of type `RecursiveProps`
const Ul: FC<RecursiveProps> = ({
getChildrenNodes, // 获取子节点的函数 | function that returns list of nested nodes
val, // 从 `props` 或 `rootProps` 获取的值 | values from `props` or `rootProps`
i, // 当前节点在平辈中的序号 | index among peers
depth // 当前嵌套深度 | current nested depth
}) => {
let childNodes = getChildrenNodes()
if (!childNodes.length) return <button
onClick={() => console.log({ val, depth, i })}
>{val}</button>
return <><button style={{ color: 'red' }} onClick={() =>
console.log({ val, depth, i })} >{val}</button>
<ul>{childNodes.map((x, i) => <li key={i}>{x}</li>)}</ul></>
}
const Index = () => {
return (<Container
Component={Ul}
getChildrenProps={({ val }) => {
return new Array(3).fill(0).map((x, i) => ({
val: val * 10 + i + 1
}))
}}
depthLimit={3}
rootProps={{ val: 1 }} />)
}
export default Index
1.0.0
3 years ago