[react] createElement与cloneElement两者有什么区别？

Posted 2021-12-23 前端小歌谣

[react] createElement与cloneElement两者有什么区别？

• createElement是创建一个React元素，jsx即是这个函数的语法糖；它的函数签命是React.createElement(type, [props], [...children])
• cloneElement是拷贝一个React元素，可选择在修改它的props后，再返回一个新的React元素；它的函数签命是React.cloneElement(element, [props], [...children]): ReactElement,这个函数常结合React.Children.map一起使用，修改props.children的props，来进行一些额外的操作，如下

/** 以下代码实现点击子组件是，先执行父组件的onClick方法，再执行子组件的onClick方法
 */

import React from 'react';

function Tab(props) 
    const _onClick = (onclick) => 
        props.onClick();
        onclick();
    ;
    return <ul onClick=props.onClick>
        
            React.Children.map(props.children, child => 
                const childProps = child.props;
                const newProps = 
                    ...childProps,
                    onClick: _onClick.bind(null, childProps.onClick)
                
                return React.cloneElement(child, newProps);
            )
        
    </ul>


function TabItem(props) 
    const onClick = event => 
        event.stopPropagation();
        props.onClick(event);
    
    return <li onClick=onClick>props.children</li>


function Demo() 
    const onClickTab = () => 
        console.log('onClickTab')
    
    const onClickItem = () => 
        console.log('onClickItem')
    
    return <Tab onClick=onClickTab>
        <TabItem onClick=onClickItem>111</TabItem>
        <TabItem onClick=onClickItem>222</TabItem>
        <TabItem onClick=onClickItem>333</TabItem>
    </Tab>


export default Demo;

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题