美文网首页
react组件的组合用法--this.props.childre

react组件的组合用法--this.props.childre

作者: 槑啊槑 | 来源:发表于2020-05-10 16:28 被阅读0次

父子组件间的传值可以通过this.props.属性名 来操作,但是this.props.children的用法会有点不一样
这种用法是属于react中的组件的组合
组件的组合是指:将一个组件写在另一个组件的内容中,然后在外层组件中通过 this.props.children来接收内容中的组件, 效果上类似vue中的插槽

    import React from 'react'
    class Title extends React.Component{
        render (
            <div>
                <h3> 这里是title </h3>
            </div>
        )
    }
    class Content extends React.Component{
        render (
            <div>
                <h3> 这里是Content </h3>
            </div>
        )
    }
    class Home extends React.Component{
        render (
            <div>
                <h3> 这里是home </h3>
                {/* 2. 在Home组件中使用 this.props.children来接收 */}
                { this.porps.children }
            </div>
        )
    }
    class App extends React.Component{
        render () {
            <Home>
                {/* 1. 将子组件放在Home组件的内容中 */}
                <Title/>
                <Content/>
            </Home>
        }
    }

这和组件的嵌套用法不同 嵌套是子组件写在父组件中的render函数中的

 // 父组件定义如下:
    import React from 'react'
    class Father extends React.Component{
        render () {
            return <div>
                    {/* 我们只要在父组件的jsx结构中以标签的形式写入子组件即可 */}
                    <Son/>
                   </div>
        }
    }
    class Son extends React.Component{
        render () {
            return  <div> 这里是子组件内容 </div>
        }
    }

相关文章

  • react组件的组合用法--this.props.childre

    父子组件间的传值可以通过this.props.属性名 来操作,但是this.props.children的用法会有...

  • 父子组件传值的方式

    父组件传值给子组件方式1、props2、context(高级用法)React的上下文-Context3、组件组合(...

  • React Native 架构之 Redux介绍

    React 在 React 中,UI 以组件的形式来搭建,组件之间可以嵌套组合。另,React 中组件间通信的数据...

  • React组件设计模式-Render-props

    React组件设计模式-组合组件 React组件设计模式-Provider-Consumer 写业务时,我们经常需...

  • React组件设计模式-Provider-Consumer

    React组件设计模式-组合组件 React组件设计模式-Render-props 我们都知道,基于props做组...

  • NT 技术周刊-1028

    React-Native 组件开发方法[原创] 摘要 �React Native的开发思路是通过组合各种组件来组织...

  • React 学习笔记2——组件使用篇

    React 核心思想 —— 组件化React 将界面分成了一个个组件,通过组件的组合、嵌套构成页面。其中,组件可复...

  • React组件之间的通讯

    在 React 中,UI 以组件的形式来搭建,组件之间可以嵌套组合。另,React 中组件间通信的数据流是单向的,...

  • React笔记

    1、组件如果我们使用react搭建页面的话,页面就是由我们编写的组件各种组合嵌套而来,可以说组件是react的基本...

  • React-router使用教程

    react-router 通过管理 URL,实现组件的切换和状态变化。 基本用法 React Router 的安装...

网友评论

      本文标题:react组件的组合用法--this.props.childre

      本文链接:https://www.haomeiwen.com/subject/emmjnhtx.html