react组件props的基本使用

最新推荐文章于 2024-05-08 15:32:24 发布

dong.wang

最新推荐文章于 2024-05-08 15:32:24 发布

阅读量269

点赞数

分类专栏： react 文章标签： React props 函数组件类组件数据传递

本文链接：https://blog.csdn.net/wangdong9395/article/details/109069132

版权

react 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

作用：用于接收组件外部的数据
传递数据：通过给组件标签添加属性
接收数据：函数组件通过参数 props接收数据，类组件通过 this.props接收数据
在这里插入图片描述

函数组件中props的基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
       function Hello(props) {
         console.log(props)
         return (
           <div>函数组件接收外部的值：{props.name} --- {props.age}</div>
         )
       }

       ReactDOM.render(<Hello name="rose" age={19}/>, document.getElementById('root'))

    </script>
</body>

</html>

class类组件中props的基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
      // class类组件
      class Hello extends React.Component {
        constructor(props) { // 如果写了constructor括号中一定得有props，否则会报错
          super(props) // 这里不传props在constructor中下行打印出来为undefined
          console.log(this.props)
        }
        render() {
          console.log(this.props) // 这里都是可以拿到值得，不受影响
          return (
            <div>class类组件中props的基本使用：{this.props.name}</div>
          )
        }
      }

       ReactDOM.render(<Hello name="rose" age={19}/>, document.getElementById('root'))

    </script>
</body>

</html>

dong.wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react组件props的基本使用

作用：用于接收组件外部的数据传递数据：通过给组件标签添加属性接收数据：函数组件通过参数 props接收数据，类组件通过 this.props接收数据函数组件中props的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫

专栏目录