當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React之函数式组件使用props

發布時間：2024/9/27 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 React之函数式组件使用props 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html>

<html>

<head>

? ? <meat charset="UTF-8">

? ? ? ? <title>3_函數式組件使用props</title>

</head>

<body>

? ?

? ? <div id="test1"></div>

? ? <div id="test2"></div>

? ? <div id="test3"></div>

? ?

? ? <script type="text/javascript" src="../js/react.development.js"></script>

? ?

? ? <script type="text/javascript" src="../js/react-dom.development.js"></script>

? ?

? ? <script type="text/javascript" src="../js/babel.min.js"></script>

? ?

? ? <script type="text/babel">

? ? ? ? function Person(props){

? ? ? ? ? ? console.log(props);

? ? ? ? ? ? const {name,age,sex}=props

? ? ? ? ? ? return(

? ? ? ? ? ? ? ? < ul >

? ? ? ? ? ? ? ? ? ? <li>姓名：{name}</li>

? ? ? ? ? ? ? ? ? ? <li>性別：{age}</li>

? ? ? ? ? ? ? ? ? ? <li>年齡：{sex}</li>

? ? ? ? ? ? ? ? </ul> ?

? ? ? ? ? ? )

? ? ? ? }

? ? ? ? // Person.propTypes = {

? ? ? ? // ? ? name:PropTypes.string.isRequired,//限制name必傳，且為字符串

? ? ? ? // ? ? sex:ProTypes.string, //限制sex為字符串

? ? ? ? // ? ? age:ProTypes.number, //限制age為數值

? ? ? ? // } ?

? ? ? ? Person.defaultProps = {

? ? ? ? ? ? sex:'男',//sex默認值為男

? ? ? ? ? ? age:18 //age默認值為18

? ? ? ? }

? ? ? ? //2.渲染組件到頁面

? ? ? ? ReactDOM.render(<Person name="jerry" />, document.getElementById('test1')); ?

? ? </script>

</body>

</html>

總結

以上是生活随笔為你收集整理的React之函数式组件使用props的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。