React基础-defaultProps与子元素

React中使用static defaultProps作为默认值
在子组件中传入标签后在子组件内部使用 {this.props.children}接收

import React, { Component } from 'react'

class Child extends Component{
    static defaultProps = {   
        title:'没传过来时候显示的标题'
    }
    constructor(props){
        super(props)
        this.state={

        }
    }
    render() {
        return (
            <div>
              {this.props.children} {/* 通过this.props.children取得父组件传过来的全部节点 */}
    <h1>{this.props.title}</h1>
            </div>
        )
    }
}

export default class app6 extends Component {
    constructor(props){
        super(props)
        this.state={
            title:'要传过来的标题'
        }
    }
    render() {
        return (
            <div>
                 <Child title={this.state.title}>
                   <div>
                   <p>有一个p</p>
                   <button>按钮</button>
                   </div>
                </Child>
            </div>
        )
    }
}


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,040评论 0 1
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,291评论 2 21
  • 为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些R...
    CrazyCodeBoy阅读 1,867评论 1 9
  • React简介 (1)简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc...
    鱼鱼吃猫猫阅读 1,663评论 1 6
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 2,570评论 1 13