5.组件数据挂载props及prop-types

教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

1.props
​ 1.1.方式1：

src/App.js

    待办事项  #update
    
    

src/components/TodoHeader/index.js 部分代码

export default function TodoHeader(props){ #update
    //接收参数
    console.log(props); #insert
    return (
      <> #insert 
        
{props.children}
  #update
            
{props.desc}
       #insert
    )
};

​ 1.2.方式2：

src/App.js

    待办事项
     #update
    

src/components/TodoInput/index.js

class TodoInput extends Component {
    render() {
        return (
            

                {this.props.btnText} #update
            
        );
    }
}

2.参数格式检查prop-types

https://www.npmjs.com/package/prop-types
cnpm i -D prop-types

​ 2.1.函数组件 src/components/TodoHeader/index.js

import React, {Component} from 'react';
import PropTypes from 'prop-types' #insert

export default function TodoHeader(props){
    //接收参数
    console.log(props);
    return (
        <>
            
{props.children}
            
{props.desc}
        

    )
};
/**                                        
 * 检查props中的数据类型                     
 */                                        
TodoHeader.propTypes={                     #insert
    desc:PropTypes.string.isRequired       #insert
}                                          #insert
/**
 * 默认值
 */
TodoHeader.defaultProps={                  #insert
    desc:"默认"                             #insert
};                                         #insert

​ 2.2.类组件 src/components/TodoInput/index.js

import React, {Component} from 'react';
import PropTypes from 'prop-types'   #insert

class TodoInput extends Component {
    
    static propTypes={               #insert
        btnText:PropTypes.string     #insert
    };                               #insert
    //默认值
    static defaultProps = {          #insert
        btnText: "添加"               #insert
    };                               #insert

    render() {
        return (
            

                {this.props.btnText}
            
        );
    }
}

export default TodoInput;