react组件使用props实现预配置插槽

react组件使用props实现预配置插槽

如何向组件内部动态传入带内容的结构(标签)?

Vue中: 
	使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
	使用children props: 通过组件标签体传入结构
	使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到 

children props例子：

import React, { Component } from 'react'
import "./index.css"
export default class Parent extends Component {
    render() {
        return (
            <div className='parent'>
                <h1>parent页面</h1>

                {/*自闭和组件*/}
                {/* <A /> */}
                {/*不是自闭和组件，传入标签体内容，这样的话在子组件A中就可以通过props的children属性就可以拿到标签体内容 子组件的props：{children: "hello"} */}
                {/* <A x={2}>hello</A> */}
                <A>
                    <B />
                </A>
            </div>
        )
    }
}

class A extends Component {
    render() {
        console.log(this.props); //{x: 2, child: hello}
        return (
            <div className='child'>
                <h1>我是A组件</h1>
                {/* 拿到父组件中的A组件标签体内容 */}
                {this.props.children}
            </div>
        )
    }
}

class B extends Component {
    render() {
        console.log("B---render");
        return (
            <div style={{ backgroundColor: "red", padding: "30px" }}>
                <h3>B组件</h3>
            </div>
        )
    }
}

render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data} 

render props例子:

import React, { Component } from 'react'
import "./index.css"
export default class Parent extends Component {
    render() {
        return (
            <div className='parent'>
                <h1>parent页面</h1>


                {/* render props例子： */}
                {/* 组件A给子组件B通过props传递参数name */}
                <A render={(name) => <B name={name} />} />
            </div>
        )
    }
}

class A extends Component {
    render() {
        console.log(this.props); //{render:}
        return (
            <div className='child'>
                <h1>我是A组件</h1>
                {/* 拿到父组件中的A组件标签体内容 */}
                {/* 通过render props拿到子组件并渲染出来，且可以在子组件中传递参数给父组件 */}
                {this.props.render("wh")}
            </div>
        )
    }
}

class B extends Component {
    render() {
        console.log("B---render");
        return (
            <div style={{ backgroundColor: "red", padding: "30px" }}>
                <h3>B组件</h3>
            </div>
        )
    }
}

总结而言：传递的props对象中根据传递的组件情况会包含children属性或者render属性，children就是一个组件，而render是一个渲染组件的方法。