小知识点系列2：怎么拿到双标签组件的数据

大家好，我是梅巴哥er， 本篇介绍拿到双标签组件数据的小方法this.props.children。

第一种：直接写内容的

// 双标签组件里直接写内容
import React, { Component } from 'react'


class Child extends Component {
    render() {
        return (
            <div>
                { this.props.children }
            </div>
        )
    }
}
class App6 extends Component {
    render() {
        return (
            <div>
                <Child>
                    子元素
                </Child>
            </div>
        )
    }
}

export default App6

第二种： 由大括号的{ }

import React, { Component } from 'react'


class Child extends Component {
    render() {
        return (
            <div>
                { this.props.children }
            </div>
        )
    }
}
class App6 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            color: 'pink'
        }
    }
    render() {
        return (
            <div>
                <Child>
                    { this.state.color }
                </Child>
            </div>
        )
    }
}

export default App6