react 父子传值

Bertha 。 2023-07-06 11:49 17阅读 0赞

![20200218154327871.png][]

### 创建父组件 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会报错

[20200218154327871.png]: https://img-blog.csdnimg.cn/20200218154327871.png