-
html标签可以在标签上写自定义属性，那么react的组件，也可以像传属性一项，给组件传props；
react组件接收到传入的属性后，会自动塞进实例的props属性中，通过this.props可以拿到外部传入的属性
来看一下props的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件实例核心属性1：state</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <div id="test2"></div> <div id="test3"></div> <div id="test4"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <script type="text/babel"> // 1.创建类组件 class Person extends React.Component{ render() { console.log(this); const { name, age, sex } = this.props; return ( <ul> <li>姓名: {name}</li> <li>性别: {sex}</li> <li>年龄: {age}</li> </ul> ) } } // 挂载 ReactDOM.render(<Person name="tom" age="18" sex="女" />, document.getElementById('test')) ReactDOM.render(<Person name="老刘" age="30" sex="男" />, document.getElementById('test2')) ReactDOM.render(<Person name="老王" age="19" sex="女" />, document.getElementById('test3')) // 批量传递props const p = { name: '老李', age: 20, sex: '男' }; ReactDOM.render(<Person {...p} />, document.getElementById('test4')) // name展示 老李 p.name = 'xxx'; </script> </body> </html>
props类型限制：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件实例核心属性1：state</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <div id="test2"></div> <div id="test3"></div> <div id="test4"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <!-- 引入prop-types --> <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script> <script type="text/babel"> // 1.创建类组件 class Person extends React.Component{ render() { console.log(this); const { name, age, sex } = this.props; return ( <ul> <li>姓名: {name}</li> <li>性别: {sex}</li> <li>年龄: {age}</li> </ul> ) } } console.log(PropTypes, 'PropTypes==='); // 对标签属性进行类型、必要性的限制 // react会识别类的propTypes的静态属性，如果有代表对props有限制，如果没有，则没有限制 Person.propTypes = { // name: React.propTypes.string, // 15版本及之前的写法，propTypes在React核心库中 name: PropTypes.string.isRequired, // 15版本之后，从核心库抽离出来了 这里代表name必须是字符串类型，并且是必填的 age: PropTypes.number.isRequired, // age必填，且为数值 sex: PropTypes.string, // sex为字符转 speak: PropTypes.func , // 限制speak为函数 } // 给标签属性加默认值 Person.defaultProps = { sex: '男', //sex默认为男 } // 挂载 ReactDOM.render(<Person name="tom" age="18" sex="女" speak={speak} />, document.getElementById('test')) ReactDOM.render(<Person name="老刘" age="30" />, document.getElementById('test2')) ReactDOM.render(<Person name="老王" age="19" sex="女" />, document.getElementById('test3')) // 批量传递props const p = { age: 20 }; ReactDOM.render(<Person {...p} />, document.getElementById('test4'))// 给组件传递方法 function speak() { console.log('我说话了'); } </script> </body> </html>
props是只读属性，在组件内部不能修改
类组件如果写了构造函数，就必须用super接收props，否则this.props是undefined；所以能不写构造函数就不写构造函数；
构造函数在组件中的主要作用就是给初始state赋值以及改变this指向的作用。但是state赋值，可以用 state = this.props的方式；改变this指向可以用箭头函数来替代。
类组件对props的限制以及默认值的规则可以写在类的内部，用static关键字给类加静态属性
// 1.创建类组件 class Person extends React.Component{ constructor(props) { // 如果写了构造器，必须用super接收props，否则this.props是undefined;不写构造器没问题 console.log(props, 'props'); super(props) } static propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired, } // 给标签属性加默认值 static defaultProps = { sex: '男', //sex默认为男 } render() { console.log(this); const { name, age, sex } = this.props; return ( <ul> <li>姓名: {name}</li> <li>性别: {sex}</li> <li>年龄: {age}</li> </ul> ) } } // 挂载 ReactDOM.render(<Person name="tom" age="18" sex="女" />, document.getElementById('test'))
旧版函数组件不能玩转 state和refs，但是可以玩 props
// 函数是组件 function Person(props) { console.log(props, 'props'); const { name, sex, age } = props; return ( <ul> <li>姓名: {name}</li> <li>性别: {sex}</li> <li>年龄: {age}</li> </ul> ) } // 对props进行限制 Person.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired, } // 给标签属性加默认值 Person.defaultProps = { sex: '男', //sex默认为男 } // 挂载 ReactDOM.render(<Person name="tom" age="18" sex="女" />, document.getElementById('test'))
-