react组件实例三大属性之props

最新推荐文章于 2024-07-31 16:51:58 发布

前端菜鸟--LKX

最新推荐文章于 2024-07-31 16:51:58 发布

阅读量114

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/lkx_20201106/article/details/121594268

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在React中使用组件的state属性来管理组件内部状态，并通过props传递属性，同时展示了如何对props进行类型限制和设置默认值。实例演示了如何创建MyState组件并传递不同形式的props给它。

摘要由CSDN通过智能技术生成

01-props的基本使用

<!DOCTYPE html>
<html lang="zh-CN">
<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>组件实例三大属性--state</title>
</head>
<body>
  <div id="test"></div>
  <div id="test2"></div>

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

  <script type="text/babel">
   class MyState extends React.Component{
     render(){
       const {name,sex,age} = this.props;
       return (
          <ul>
            <li>{name}</li>
            <li>{sex}</li>
            <li>{age+1}</li>
          </ul>
       )
     }
   }
   const obj = {name:'lin',sex:'男',age:19}
   ReactDOM.render(<MyState name='chen' sex='女' age='30'/>,document.getElementById('test2'))
  //  ReactDOM.render(<MyState name='lin' sex='男' age='18'/>,document.getElementById('test'))
   ReactDOM.render(<MyState {...obj}/>,document.getElementById('test'))
    
  </script>
</body>
</html>

02-对props进行限制

<!DOCTYPE html>
<html lang="zh-CN">
<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>组件实例三大属性--state</title>
</head>
<body>
  <div id="test"></div>
  <div id="test2"></div>

  <script type="text/javascript" src="../react_js/react.development.js"></script>
  <script type="text/javascript" src="../react_js/react-dom.development.js"></script>
  <script type="text/javascript" src="../react_js/babel.min.js"></script>
  <!-- 对props进行类型限制 -->
  <script type="text/javascript" src="../react_js/prop-types.js"></script>

  <script type="text/babel">
   class MyState extends React.Component{
     render(){
       console.log(this);
       const {name,sex,age} = this.props;
       return (
          <ul>
            <li>{name}</li>
            <li>{sex}</li>
            <li>{age+1}</li>
          </ul>
       )
     }
  }
  // props是只读的
  //  限制标签属性props类型
  MyState.propTypes = {
    name:PropTypes.string.isRequired,//isRequired 限制是否必传
    sex:PropTypes.string,
    age:PropTypes.number,
    speak:PropTypes.func
  }

  // 设置标签属性props默认值
  MyState.defaultProps={
    name:'姓名',
    age:50,
    sex:'人妖'
  }


   const obj = {name:'lin',sex:'男',age:18}
   ReactDOM.render(<MyState name='chen' sex='女' age={30}/>,document.getElementById('test2'))
  //  ReactDOM.render(<MyState name='lin' sex='男' age='18'/>,document.getElementById('test'))
   ReactDOM.render(<MyState {...obj} speak={speak}/>,document.getElementById('test'))
  
  function speak() {
    console.log('说话');
  }
  </script>
</body>
</html>

03-props的简写

<!DOCTYPE html>
<html lang="zh-CN">
<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>组件实例三大属性--state</title>
</head>
<body>
  <div id="test"></div>
  <div id="test2"></div>

  <script type="text/javascript" src="../react_js/react.development.js"></script>
  <script type="text/javascript" src="../react_js/react-dom.development.js"></script>
  <script type="text/javascript" src="../react_js/babel.min.js"></script>
  <!-- 对props进行类型限制 -->
  <script type="text/javascript" src="../react_js/prop-types.js"></script>

  <script type="text/babel">
   class MyState extends React.Component{
    // 限制标签属性props类型
    static propTypes = {
      name:PropTypes.string.isRequired,//isRequired 限制是否必传
      sex:PropTypes.string,
      age:PropTypes.number,
      speak:PropTypes.func
    }

    // 设置标签属性props默认值
    static defaultProps={
      name:'姓名',
      age:50,
      sex:'人妖'
    }

    render(){
       console.log(this);
       const {name,sex,age} = this.props;
       return (
          <ul>
            <li>{name}</li>
            <li>{sex}</li>
            <li>{age+1}</li>
          </ul>
        )
      }
    }
  

   const obj = {name:'lin',sex:'男',age:18}
   ReactDOM.render(<MyState name='chen' age={30}/>,document.getElementById('test2'))
  //  ReactDOM.render(<MyState name='lin' sex='男' age='18'/>,document.getElementById('test'))
   ReactDOM.render(<MyState {...obj} speak={speak}/>,document.getElementById('test'))
  
  function speak() {
    console.log('说话');
  }
  </script>
</body>
</html>```