手册   游戏   WEB   字典   单词   在线工具  

REACT--props 校验规则

// 类式组件的 props 校验方法

  1. <!DOCTYPE html>
  2. <HTML lang="en">
  3.   
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>
  8.       Document
  9.     </title>
  10.     <script src="https:[email protected]/umd/react.development.js" crossorigin>
  11.     </script>
  12.     <!-- 该文件向外暴露了一个对象 React-Dom -->
  13.     <script src="https:[email protected]/umd/react-dom.development.js" crossorigin>
  14.     </script>
  15.     <script src="https:[email protected]/babel.min.js">
  16.     </script>
  17.     <script src="https:[email protected]/babel.min.js">
  18.     </script>
  19.     <script src="https:[email protected]/prop-types.js">
  20.     </script>
  21.   </head>
  22.   
  23.   <body>
  24.     <div id="app">
  25.     </div>
  26.     <script type="text/babel">
  27.       class Study extends React.Component {
  28.         static propTypes = {
  29.           react: PropTypes.string.isRequired,
  30.           vue: PropTypes.string.isRequired
  31.         }
  32.         static defaultProps = {
  33.           // react:"react"
  34.         }
  35.         render() {
  36.           return ( < ul > <li > {
  37.             this.props.react
  38.           } < /li>
  39.                          <li>{this.props.vue}</li > </ul>
  40.                  )
  41.              }
  42.          }
  43.          let p = {vue:"学习 vue"}
  44.          ReactDOM.render(<Study  {...p} / > , document.getElementById("app"))
  45.     </script>
  46.   </body>
  47.  
  48. </HTML>
  1. // 函数式组件 props 校验规则类式组件也可以这么写
  2. // 在 react 中函数实例化会默认开启严格模式, 严格模式下函数 this 指向 undefined, 函数能接收 props 是因为函数能接收外部传值
  3. // 函数组件不能初始化 states 和获取 this 上一切属性及方法 (除外部传人的 props)
  1. <!DOCTYPE HTML>
  2. <HTML lang="en">
  3.   
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>
  8.       Document
  9.     </title>
  10.     <script src="https:[email protected]/umd/react.development.js" crossorigin>
  11.     </script>
  12.     <!-- 该文件向外暴露了一个对象 React-Dom -->
  13.     <script src="https:[email protected]/umd/react-dom.development.js" crossorigin>
  14.     </script>
  15.     <script src="https:[email protected]/babel.min.js">
  16.     </script>
  17.     <script src="https:[email protected]/babel.min.js">
  18.     </script>
  19.     <script src="https:[email protected]/prop-types.js">
  20.     </script>
  21.   </head>
  22.   
  23.   <body>
  24.     <div id="app">
  25.     </div>
  26.     <script type="text/babel">
  27.       function Study(props) {
  28.         return ( < ul > <li > {
  29.           props.react
  30.         } < /li>
  31.                      <li>{props.vue}</li > </ul>
  32.              )
  33.          }
  34.          Study.propTypes = {
  35.              react:PropTypes.string.isRequired,
  36.              vue:PropTypes.string.isRequired
  37.          }
  38.          let p = {vue:"学习 vue"}
  39.          ReactDOM.render(<Study  {...p} / > , document.getElementById("app"))
  40.     </script>
  41.   </body>
  42.  
  43. </HTML>

来源: http://www.bubuko.com/infodetail-3716301.html


与本文相关文章

  1. [React] antd 的 form 表单的自定义校验规则的用法
  2. Oracle 关于身份证校验规则详细说明 (附有代码复制可执行)
  3. react 中的 三大重要属性 state refs props
  4. React 中的 Render Props
  5. 像 vuejs 一样, watch React 组件 props 变化
  6. 详解 react 中的 state,props,refs
  7. React Native的props使用详解
  8. 用一句概括 React 中的 state 和 props
暂无,快来抢沙发吧！
更多





黑ICP备17005318号-1