react childern添加事件

时间:2022-07-22
本文章向大家介绍react childern添加事件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
function ChildContent({ children }: contentType) {
    const childNumber: number = Children.count(children)
    console.log('child', children)
    const cloneEl = (c: ReactElement) => React.cloneElement(c, { onClick: () => { console.log(888) } })
    const createEl = (c: ReactElement) => React.createElement("div")
    // console.log('create', React.createElement(React.Fragment, {}, children))
    const creatEl = React.createElement(React.Fragment, {}, children)
    if (childNumber === 1 && Children.only(children).type === 'a') {
        return <>{children}</>
        // return (<div onClick={console.log(888)}>{children}44</div>)
    } else {
        console.log('qq', Children.toArray(children))
        console.log('o', Children.map(children, (v) => {
            console.log('v', v)
            return v
        }))
        return <>{creatEl}</>
    }
    // return {!href?}
}

function LinkChild() {
    return (
        <>
            <div>
                <ChildContent>
                    <>
                        <span style={{ color: 'red' }} className="aaaa">1334</span>
                        <span>1334</span>
                    </>
                </ChildContent>
            </div>
        </>
    );
}