import React, { Component } from ‘react’
// 单独引入一个prop-types
import propTypes from ‘prop-types’ // 包含数据验证方法
console.log(propTypes)
// 用props父子通信
// 做一个属性验证:验证每一个属性类型
// 默认属性:不传属性的时候的默认值
class Navbar extends Component {
//props:[‘mytext’] vue写法父子通信
/*
props:{
myshow:Boolean,
mytext: String
}
/
// 关键字 做属性验证
static propTypes = {
mytext: propTypes.string, // 验证是不是字符串
myshow: propTypes.bool // 验证是不是布尔
}
// 默认属性
static defaultProps = {
myshow: true
}
render() {
return(
{/
1.这里要获取定义的元素,不加括号,这里把它当成字符串
2.
/}
{
this.props.myshow?
返回
:’’
}
{/ 这里就获取了 /}
{this.props.mytext}导航栏
{
this.props.myshow?
主页
:’’
}
)
}
}
// 组件是在默认暴露的外面的,不能在组件内容定义组件,可以在组件的内部调用组件
/
父子通信
1.在(子级是在父级中调用)调用的时候传一个key的值
2.子组件中this.props.key
/
export default class prop1 extends Component {
state={
fn: true,
fn1: false
}
render() {
let obj={
mytext:‘home’,
myshow: false
}
return (
{/
// props用在父子通信,让组件的复用性大大提高
在调用子组件中定义一个key,把它它传到子组件中
/}
<div style={{background:‘red’}}>
Home
{/ 字符串的true或者false,都是为true /}
{/ /}
{/ /}
{/ key和obj的key的值是一样的,所以可以简写 */}
<Navbar {…obj}/>
<div style={{background:‘blue’}}>
List
<div style={{background:‘yellow’}}>
about
)
}
}
- List item