React 克隆组件：React.cloneElement()

发布时间：2020-12-15 07:14:03 所属栏目：百科来源：网络整理

导读：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 pro

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);

效果如图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!