React 之函数式组件使用props

对于react的三大核心属性state、props、refs，只有props能被函数式组件使用，因为只有props属性可以作为参数调用。

相关代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>3_函数组件使用props</title>
</head>
<body><!--准备好一个容器--><div id="test1"></div><div id="test2"></div><!--引入react核心库--><script type="text/javascript" src="../js/react.development.js"></script><!--引入react-dom，用于支持react操作DOM--><script type="text/javascript" src="../js/react-dom.development.js"></script><!--引入babel,用于将jsx转为js--><script type="text/javascript" src="../js/babel.min.js"></script><!--引入prop-types,用于将对组件标签属性进行限制--><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">   //<!--此处一定要写babel-->//创建组件function Person(props){const {name,gender,age} = propsreturn (<ul><li>姓名：{name}</li><li>性别：{gender}</li><li>年龄：{age}</li></ul>)}Person.propTypes={name:PropTypes.string.isRequired,     //name指定为字符串类型，而且必须得填，不能为空gender:PropTypes.string,age:PropTypes.number,speak:PropTypes.func,       //限制speak为函数}Person.defaultProps = {         //如果gender或者age值为空，就使用默认值gender:'男',age:18}//渲染组件到页面ReactDOM.render(<Person name="sandy" age={18} gender="女" speak={speak}/>,document.getElementById('test1'))const p={name:'小唐',age:18,gender:'女'}ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))function speak(){console.log('happy');}</script></body></html>

React 之函数式组件使用props相关推荐

React之函数式组件使用props
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
[react] react的函数式组件有没有生命周期？
[react] react的函数式组件有没有生命周期? 没有个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
React之函数式组件和高阶组件（装饰器、带参装饰器）
import React from 'react'; // 此句不能少 import ReactDom from 'react-dom';const Wrapper = props => < ...
前端学习（2224）：react之函数式组件
import React from 'react'; import ReactDOM from 'react-dom';function Childcom() {let title = < h2 ...
React之函数式组件
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
前端学习（3222）：函数式组件使用props
2021-05-29 react antd 函数式组件使用history.push(url)时，跳转不刷新的问题？
**在传递URL使使用给传递了一个state成功解决问题形如history.push(url,{a:1}) **
reactjs组件实例的三大属性之props使用示例:在函数式组件中使用props
props基本使用 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

React 之函数式组件使用props

React 之函数式组件使用props相关推荐

最新文章

热门文章

React 之 函数式组件使用props

React 之 函数式组件使用props相关推荐

最新文章

热门文章

React 之函数式组件使用props

React 之函数式组件使用props相关推荐