react 父子传值

创建父组件 Demofather.js

第一种传值：在子元素标签上  title='待办事项' x={1}

字符串可以用" "引号传递

数字类型用{}大括号传递

子组件标签内部可以传递任何数据，react将自动生成props.children数据

import React, { Component } from 'react';
import{Demo,Demo2} from './index.js' //统一管理子元素的export

class Demofather extends Component {

  render() {
    return (
      <div className="App">
        <Demo title='待办事项' x={1}>
            今日事今日毕
        </Demo>
        <Demo2 btnText='add'/>
      </div>
    );
  }
}

export default Demofather

创建函数式子组件 Demo.js

函数式子组件通过参数props接收

import React from 'react'
//引入类型检查插件
import PropTypes from 'prop-types'
 
//函数式组件
export default function Demo(props){
    console.log(props) //{title: "待办事项", children: "我是其他传值"}
    return(
        <div>
            <p>我是父元素传来的：{props.title}</p>
            <p>我是父元素中标签内的传值：{props.children}</p>
            <p>我是父元素传来的数字：{props.x+props.x}</p>
        </div>
    )
}

Demo.propTypes={
    title:PropTypes.string,
    x:PropTypes.number.isRequired  //监测是否为必传
}

创建类子组件 Demo2.js

类子组件通过 {this.props.btnText} 接收

import React, { Component } from 'react';

//引入类型检查插件
import PropTypes from 'prop-types'

export default class Demo2 extends Component {
  //类型检验
  static propTypes ={
    btnText:PropTypes.string
  }
  //没传值的话默认值
  static defaultProps = {
    btnText:'添加'
  }
  render() {
    return (
      <div> 
        <input type="text"/>
        <button>{this.props.btnText}</button>
      </div>
    );
  }
}

其次还安装了数据类型检验的插件prop-types：

安装：npm install prop-types --save

需要检验的组件中引入：import  PropTypes  from  'prop-types'

函数式组件这样检验：

组件名+propTypes

后面加isRequired 监测必传项是否传入

Demo.propTypes={
    title:PropTypes.string,
    x:PropTypes.number.isRequired  //监测是否为必传
}

类组件中这样检验：

//类型检验
  static propTypes ={
    btnText:PropTypes.string
  }
  //没传值的话默认值
  static defaultProps = {
    btnText:'添加'
  }

如果没有按照检验规则传入，f12会报错