3.2 获取props.children的值

最新推荐文章于 2024-08-08 15:26:33 发布

蓝色清晨_

最新推荐文章于 2024-08-08 15:26:33 发布

阅读量723

点赞数

CC 4.0 BY-SA版权

分类专栏： React 笔记

本文链接：https://blog.csdn.net/yingleiming/article/details/118393183

React 笔记专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在React中利用this.props.children属性从父组件向子组件传递内容，并展示了如何在函数式组件与类组件中获取传递过来的内容。此外，还讲解了如何正确传递数字类型的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过 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>
            </>
        )
    }
}