react中的——props.child擷取元件中間的元素， React中的頂層Api方法克隆.cloneElement——周遊 React.Children.map

children屬性

表示元件标簽的子節點，當元件标簽有子節點時，props就會有該屬性，與普通的props一樣，其值可以使任意類型。單标簽和雙标簽中沒有資料都是沒有此屬性。

# 父元件
class App extends React.Component {
  render() {
    return (
        <div>
          <Cmp>我是children中的值</Cmp>
        </div>
    )
  }
}

# 子元件
{props.children}      

• 在自定義元件标簽中間寫的内容，它都會通過​

  ​this.props.children​

  ​屬性擷取
• 如果自定義元件标簽中間隻有一個子元素，則此屬性傳回一個對象，如果是多個子元素則傳回一個數組
• 使用它就可以實作類似于vue中的插槽功能

console.log(this.props.children);      

子元件得到的要麼是字元串值，要是傳入的是HTMLelement的話就是标簽對象，傳入多個就生成數組，每個數組元素就是标簽對象或者其他。

import React, { Component } from 'react';

class Child extends Component {
    render() {
        console.log( this.props.children);
        return (
            <div>
                {
                    this.props.children?this.props.children:<div>預設插槽</div>
                }
            </div>
        );
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <Child>
                    <div>插槽機制</div>
                </Child>
            </div>
        );
    }
}

export default App;      

React中的頂層Api方法 克隆一個虛拟dom對象,實作插槽樣式的修改

React中的頂層Api方法 克隆一個虛拟dom對象

​​

​let cloneElement= React.cloneElement(本來的dom對象, {dom屬性}​

​

import React, { Component } from 'react';

class Child extends Component {
    render() {
        let cloneElement = React.cloneElement(this.props.children,{
            style:{color:'red'},
            uid:Date.now(),
            onClick:()=>console.log("我是被克隆出來的虛拟dom對象"),
        })
        console.log(cloneElement);
        return (
            <div>
                {
                    this.props.children?this.props.children:<div>預設插槽</div>
                }
                <hr />
                {
                    cloneElement
                }
            </div>
        );
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <Child>
                    <div>插槽機制</div>
                </Child>
            </div>
        );
    }
}

export default App;      

React中的頂層Api方法 周遊 React.Children.map

react元件之間傳輸的動态屬性值可以是dom元素

<Child header={<div>我是頭部</div>} footer={<div>我是尾部</div>}>
     <div>插槽機制</div>
     <div>插槽機制</div>
     <div>插槽機制</div>
     <div>插槽機制</div>
 </Child>      

import React, { Component } from 'react';

class Child extends Component {
    render() {
        // console.log(this.props.children);
        let cloneElement = React.Children.map(this.props.children,(child,idnex)=>{
            return React.cloneElement(child,{
                style:{color:"red"},
                id:Date.now(),
                onClick:()=>console.log("我是多元件元素的事件")
            })
        })
        console.log(cloneElement);
        return (
            <div>
                {
                    this.props.children?this.props.children:<div>預設插槽</div>
                }
                <hr />
                {
                    cloneElement
                }

            </div>
        );
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <Child header={<div>我是頭部</div>} footer={<div>我是尾部</div>}>
                    <div>插槽機制</div>
                    <div>插槽機制</div>
                    <div>插槽機制</div>
                    <div>插槽機制</div>
                    <div>插槽機制</div>
                    
                </Child>
            </div>
        );
    }
}

export default App;