教程1-14完整項(xiàng)目地址 https://github.com/x1141300029/react-Todos.git

1.props
? 1.1.方式1：

src/App.js

<Fragment>
    <TodoHeader desc="今日事丙猬，今日畢乏德。">待辦事項(xiàng)</TodoHeader>  #update
    <TodoInput/>
    <TodoList/>
</Fragment>

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

export default function TodoHeader(props){ #update
    //接收參數(shù)
    console.log(props); #insert
    return (
      <> #insert 
        <h1>{props.children}</h1>  #update
            <h3>{props.desc}</h3>
      </> #insert
    )
};

? 1.2.方式2：

src/App.js

<Fragment>
    <TodoHeader desc="今日事涧偷，今日畢。">待辦事項(xiàng)</TodoHeader>
    <TodoInput btnText="ADD"/> #update
    <TodoList/>
</Fragment>

src/components/TodoInput/index.js

class TodoInput extends Component {
    render() {
        return (
            <div>
                <input type="text"/><button>{this.props.btnText}</button> #update
            </div>
        );
    }
}

2.參數(shù)格式檢查prop-types

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

? 2.1.函數(shù)組件 src/components/TodoHeader/index.js

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

export default function TodoHeader(props){
    //接收參數(shù)
    console.log(props);
    return (
        <>
            <h1>{props.children}</h1>
            <h3>{props.desc}</h3>
        </>

    )
};
/**                                        
 * 檢查props中的數(shù)據(jù)類型                     
 */                                        
TodoHeader.propTypes={                     #insert
    desc:PropTypes.string.isRequired       #insert
}                                          #insert
/**
 * 默認(rèn)值
 */
TodoHeader.defaultProps={                  #insert
    desc:"默認(rèn)"                             #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
    //默認(rèn)值
    static defaultProps = {          #insert
        btnText: "添加"               #insert
    };                               #insert

    render() {
        return (
            <div>
                <input type="text"/><button>{this.props.btnText}</button>
            </div>
        );
    }
}

export default TodoInput;