3.2 获取props.children的值

通过 this.props.children 获取父组件传过来的内容

//Column 父组件
import React, { Component } from 'react'
import ColumnItem from "./ColumnItem"

export default class Columns extends Component {
    render() {
        return (
            <div>
                <ColumnItem>
                    {/*在组件中传递 children 的内容*/}
                    <span>杂七杂八的内容</span>
                </ColumnItem>
            </div>
        )
    }
}

通过 this.props.children 获取上图 span中的内容

//ColumnItem 子组件
import React, { Component } from 'react'
import "./index.css"

export default class ColumnItem extends Component {
    render() {
        return (
            <>
                <h1>获取children中的内容：{this.props.children}</h1>
            </>
        )
    }
}

如果是函数式组件，使用 props.children 来获取；

可以通过 props 传递任何东西，像方法、字符串、数字等等；但是传递数字时需要注意要使用 {}，如果不加，会当作字符串来处理。

//Columns 父组件
import React, { Component } from 'react'
import ColumnItem from "./ColumnItem"

export default class Columns extends Component {
    render() {
        return (
            <div>
                <ColumnItem x="1" y="2"></ColumnItem>{/*结果是12 */}
                <ColumnItem x={1} y={2}></ColumnItem>{/*传递数字要使用花括号*/}
            </div>
        )
    }
}

import React, { Component } from 'react'

export default class ColumnItem extends Component {
    render() {
        return (
            <>
                <h1>计算的结果是：{this.props.x + this.props.y}</h1>
            </>
        )
    }
}