React 克隆组件：React.cloneElement()

最新推荐文章于 2024-05-28 13:17:29 发布

weixin_34111790

最新推荐文章于 2024-05-28 13:17:29 发布

阅读量1.4k

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010062928

版权

react提供了一个克隆 API：

React.cloneElement(
  element,
  [props],
  [...children]
)

官方定义：

Clone and return a new React element using element as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.

下面实现一个demo，通过 React.cloneElement 向子组件传递 state 及 function，代码如下：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MyContainer extends Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 1
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.state.count++;
        this.setState({
            count: this.state.count++
        })
        console.log(this.state)
    }

    render() {
        const childrenWithProps = React.Children.map(this.props.children, child => React.cloneElement(child, 
            {
                parentState: this.state.count,
                handleClick: this.handleClick
            }
        ));
        return (
            <div style={{border:"1px solid blue"}}>
                <span>父容器:</span>
                { childrenWithProps }
            </div>
        )
    }
}
class MySub extends Component {
    constructor(props) {
        super(props)
        this.state = {
            flag: false
        }
    }

    render() {
        return (
            <div style={{margin: "15px", border: "1px solid red"}}>
                子元素:{this.props.subInfo}
                <br/>
                父组件属性count值: { this.props.parentState }
                <br/>
                <span onClick={ () => this.props.handleClick() } 
                      style={{display:"inline-block",padding: "3px 5px", color:"#ffffff", background: "green", borderRadius: "3px", cursor: "pointer"}} 
                >click me</span>
            </div>
        )
    }
}
ReactDOM.render (
    (
        <MyContainer>
            <MySub subInfo={"1"}/>
            <MySub subInfo={"2"}/>
        </MyContainer>
    )
    , document.getElementById('content'))


<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>react drag components example...</title>
    <link rel="stylesheet" href="/build/main.css">
</head>

<body>
    <div id="content"></div>
    <script src="bundle.js"></script>
</body>

</html>

需要注意，在父组件的构造器中，需要动态制定函数的 this 指向，否则该函数通过事件触发时，this指向子组件。通过下面语句：

this.handleClick = this.handleClick.bind(this);

效果如图：
图片描述

weixin_34111790

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 克隆组件：React.cloneElement()

react提供了一个克隆 API：React.cloneElement( element, [props], [...children])官方定义：Clone and return a new React element using element as the starting point. The resultin...
复制链接

扫一扫

React 克隆组件：React.cloneElement()

“相关推荐”对你有帮助么？