react（尚硅谷）02-props基本写法，给props设置数据规则，函数式组件使用props，字符串形式的refs，回调形式的的ref，createRef的使用

最新推荐文章于 2023-05-15 16:50:38 发布
最新推荐文章于 2023-05-15 16:50:38 发布
阅读量468 收藏
点赞数
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/121044430
版权
1、props基本写法

和vue里面的props很像，这里直接从组件的标签属性中往组件属性中传值，建立起了组件和外部的通讯。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建组件
    class Person extends React.Component{
      render(){
        const {name,age,gender}=this.props

        return (
          <ul>
            <li>姓名：{name}</li>
            <li>年龄：{age}</li>
            <li>性别：{gender}</li>
          </ul>)
      }

    }

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(<Person name="zhangsanfeng" age='34' gender='female'/>,document.getElementById('test'))


  </script>
</body>
</html>
2、给props设置数据规则

使用propTypes来设定
具体规则是react内置的规则：React.PropType.string等等（16的版本以后被弃用）16版本以前放在prop-types.js里，需要引包
对应必填的可以使用链式语法
对于默认值使用类.defaultProps={}的形式来写
prop是只读的，不可以写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建组件
    class Person extends React.Component{
      render(){
        const {name,age,gender}=this.props

        return (
          <ul>
            <li>姓名：{name}</li>
            <li>年龄：{age}</li>
            <li>性别：{gender}</li>
          </ul>)
      }

    }
    Person.propTypes={
      name:PropTypes.string.isRequired,//指定姓名为字符串且必须
      gender:PropTypes.string,
      age:PropTypes.number,
      speak:PropTypes.func//func是函数的意思，这里不用function是因为它是关键字，另外，speak我没在虚拟dom里面传属性
    }
    Person.defaultProps={
      gender:'gonggong',
      age:18
    }
    const p={name:'zhangsan',age:34,gender:'female'}

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    //这里使用扩展运算符展开了p对象，注意，这个三点展开不是js的原生运算，是react特有的
    ReactDOM.render(<Person  {...p}/>,document.getElementById('test'))


  </script>
</body>
</html>

实际propType和defaultProps都可以以静态属性的形式写在类内部。这样避免了在类外部定义属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建组件
    class Person extends React.Component{
      static propTypes={
        name:PropTypes.string.isRequired,//指定姓名为字符串且必须
        gender:PropTypes.string,
        age:PropTypes.number,
        speak:PropTypes.func//func是函数的意思，这里不用function是因为它是关键字，另外，speak我没在虚拟dom里面传属性
      }
      static defaultProps={
        gender:'gonggong',
        age:18
      }
      render(){
        const {name,age,gender}=this.props

        return (
          <ul>
            <li>姓名：{name}</li>
            <li>年龄：{age}</li>
            <li>性别：{gender}</li>
          </ul>)
      }

    }
    const p={name:'zhangsan',age:34,gender:'female'}

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    //这里使用扩展运算符展开了p对象，注意，这个三点展开不是js的原生运算，是react特有的
    ReactDOM.render(<Person  {...p}/>,document.getElementById('test'))


  </script>
</body>
</html>
3、函数式组件使用props

直接对函数的形参传入props就行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建组件
    class Person extends React.Component{
      constructor (props) {
        super(props);
      }
      static propTypes={
        name:PropTypes.string.isRequired,//指定姓名为字符串且必须
        gender:PropTypes.string,
        age:PropTypes.number,
        speak:PropTypes.func//func是函数的意思，这里不用function是因为它是关键字，另外，speak我没在虚拟dom里面传属性
      }
      static defaultProps={
        gender:'gonggong',
        age:18
      }
      render(){
        const {name,age,gender}=this.props

        return (
          <ul>
            <li>姓名：{name}</li>
            <li>年龄：{age}</li>
            <li>性别：{gender}</li>
          </ul>)
      }

    }
    //函数式组件接收props
    function NewPerson(props){
      const {name,age,gender}=props
      return (
        <ul>
          <li>name:{name}</li>
          <li>age:{age}</li>
          <li>gender:{gender}</li>
        </ul>
      )
    }
    NewPerson.prototypes={
      name:PropTypes.string.isRequired,//指定姓名为字符串且必须
      gender:PropTypes.string,
      age:PropTypes.number
    }

    NewPerson.defaultProps={
      gender:'gonggong',
      age:18
    }
    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    //这里使用扩展运算符展开了p对象，注意，这个三点展开不是js的原生运算，是react特有的
    ReactDOM.render(<Person  name="zhangsan"/>,document.getElementById('test'))
    ReactDOM.render(<NewPerson  name="lisi" gender="male"/>,document.getElementById('test'))


  </script>
</body>
</html>
4、字符串形式的ref（不被推荐）

组件内的标签可以定义ref属性来标识自己
ref值{key：value}对应组件标签中的键值对，其中key对应组件标签ref的值，value对应当前节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //创建类组件
    class MyComponent extends React.Component{
      //使用赋值及箭头函数的形式来避免this指向错误
      showleft=()=>{
        const {inputLeft}=this.refs
        console.log(inputLeft.value)
      }
      showright=()=>{
        const {inputRight}=this.refs
        console.log(inputRight.value)
      }
      render(){
        return (
          <div>
            <input type="text" ref="inputLeft"  placeholder="please input something"/>
            <input type="button" onClick={this.showleft} value="弹出"/>
            <input type="text" ref="inputRight" onBlur={this.showright}  placeholder="please input somthing"/>
          </div>
        )
      }
    }

    //渲染组件
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))


  </script>
</body>
</html>
5、回调形式的ref

ref={回调函数}//注意是回调函数，不是回调函数名
这个箭头函数的参数就是当前节点
在函数体内对ref的值进行命名
这个回调函数由react来调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //创建类组件
    class MyComponent extends React.Component{
      //使用赋值及箭头函数的形式来避免this指向错误
      showleft=()=>{
        const {inputLeft}=this
        console.log(inputLeft.value)
      }
      showright=()=>{
        const {inputRight}=this
        console.log(inputRight.value)
      }
      render(){
        //ref=后面以对象的形式传入一个回调函数，回调函数的参数是当前节点，将当前节点赋值给this，并给ref取名为inputLeft
        return (
          <div>
            <input type="text" ref={(currentNode)=>{this.inputLeft=currentNode}} placeholder="please input something"/>
            <input type="button" onClick={this.showleft} value="弹出"/>
            <input type="text" ref={(currentNode)=>{this.inputRight=currentNode}} onBlur={this.showright}  placeholder="please input somthing"/>
          </div>
        )
      }
    }

    //渲染组件
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))


  </script>
</body>
</html>
  • //ref=后面以对象的形式传入一个回调函数，回调函数的参数是当前节点，将当前节点赋值给this，并给ref取名为inputLeft
  • //注意：在内联调用下，回调会执行两次，一次是传null，第二次才传入当前节点
  • 要避免这么使用的话则使用类调用的形式
  • jax注释使用{/**/}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //创建类组件
    class MyComponent extends React.Component{
      state={ishot:true,wind: '微风'}
      //使用赋值及箭头函数的形式来避免this指向错误
      showleft=()=>{
        const {inputLeft}=this
        console.log(inputLeft.value)

      }
      showright=()=>{
        const {inputRight}=this
        console.log(inputRight.value)
      }
      changeWeather=()=>{
        const {ishot}=this.state
        //
        this.setState({ishot:!ishot})
      }

      saveinput=(currentNode)=>{
        this.inputLeft=currentNode
        console.log('@',currentNode)

    }
      render(){
        //ref=后面以对象的形式传入一个回调函数，回调函数的参数是当前节点，将当前节点赋值给this，并给ref取名为inputLeft
        //注意：在内联调用下，回调会执行两次，一次是传null，第二次才传入当前节点
        //建议写成内联的
        const {ishot}=this.state

        return (
          <div>
            <h1>今天天气很{ishot?'炎热':'凉爽'}</h1>
            <button onClick={this.changeWeather}>点我切换天气</button>
            {/*<input type="text" ref={(currentNode)=>{this.inputLeft=currentNode;
              console.log('@',currentNode)}} placeholder="please input something"/>*/}
            <input ref={this.saveinput} type="text"/>
            <input type="button" onClick={this.showleft} value="弹出"/>
            <input type="text" ref={(currentNode)=>{this.inputRight=currentNode}} onBlur={this.showright}  placeholder="please input somthing"/>
          </div>
        )
      }
    }

    //渲染组件
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))


  </script>
</body>
</html>
6、creatRef的使用
  • React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
  • 该容器专人专用，只能使用一份，所以需要创建另外一个容器
  • 目前这种形式是最被推荐的
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //创建类组件
    class MyComponent extends React.Component{
      myRef=React.createRef()
      myRef2=React.createRef()
      state={ishot:true,wind: '微风'}
      //使用赋值及箭头函数的形式来避免this指向错误
      showleft=()=>{
        // const {inputLeft}=this
        // console.log(inputLeft.value)
        console.log(this.myRef.current.value)

      }
      showright=()=>{
        // const {inputRight}=this
        // console.log(inputRight.value)
        console.log(this.myRef2.current.value)

      }
      changeWeather=()=>{
        const {ishot}=this.state
        //
        this.setState({ishot:!ishot})
      }

      saveinput=(currentNode)=>{
        this.inputLeft=currentNode
        console.log('@',currentNode)

    }
      render(){
        //ref=后面以对象的形式传入一个回调函数，回调函数的参数是当前节点，将当前节点赋值给this，并给ref取名为inputLeft
        //注意：在内联调用下，回调会执行两次，一次是传null，第二次才传入当前节点
        //建议写成内联的
        const {ishot}=this.state

        return (
          <div>
            <h1>今天天气很{ishot?'炎热':'凉爽'}</h1>
            <button onClick={this.changeWeather}>点我切换天气</button><br/>
            {/*<input type="text" ref={(currentNode)=>{this.inputLeft=currentNode;
              console.log('@',currentNode)}} placeholder="please input something"/>*/}
            <input ref={this.myRef} type="text"/>
            <input type="button" onClick={this.showleft} value="弹出"/><br/>
            <input type="text" ref={this.myRef2} onBlur={this.showright}  placeholder="please input somthing"/>
          </div>
        )
      }
    }

    //渲染组件
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))


  </script>
</body>
</html>
心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react - 定义组件 - Props
weixin_57135131的博客
02-10 1273
react - 定义组件 - Props
深度讲解React Props
grooyo的博客
09-28 1196
每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据注意:组件内部不要修改props数据使用propTypes 属性并配合prop-types 三方库实现prop验证（不用另外下载，已集成在脚手架中）
【react】函数式组件使用props
bbt953的博客
03-10 293
函数式组件使用props
【React 框架】React面向组件编程：函数式组件 / 类式组件 ( state / props / refs / 事件处理 )
qq_30148319的博客
06-12 1448
【React 框架】函数式组件 / 类式组件 ( state / props / refs / 事件处理 )
Vue 3的组合式API中，setup()函数的两个参数：props和context。
lrbfly的博客
05-15 889
参数来获取组件的属性、非响应式属性、插槽和触发事件的方法。函数中访问组件实例、父组件属性、全局属性等。此代码有该AI 助手为您带来的，v信小程序：欢迎评论留言交流学习。对象来使用这些属性。这个参数在Vue 2中是通过。函数在组件初始化期间只会执行一次，并且在。对象提供了一些有用的属性和方法，用于在。对象包含了组件接收的属性。在上面的示例中，我们使用了。函数中通过解构或直接访问。下面是一个示例，展示了。语句返回一个响应式对象。，使其在组件中可用。
React 之 函数式组件使用props
qq_51219425的博客
03-08 4587
对于react的三大核心属性state、props、refs，只有props能被函数式组件使用，因为只有props属性可以作为参数调用。 相关代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3_函数组件使用props</title> </head> <body> <!--准备好一个容器--&gt
React Props 中级篇 —— 如何简化props的使用和如何在函数式组件中使用props
weixin_54259790的博客
08-24 231
React 中级篇 —— 如何简化props的使用和如何在函数式组件中使用props 1. 简化props的使用：在Person本身添加 关键字 static class Person extends React.Component{ static propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number, sex:PropTypes.string, }
10 React中的组件、父子组件、React props父子组件传值、、父组件中通过refs获取子组件属性和方法
最新发布
03-01
10 React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法(34分3秒)
react-merge-refs:React Utility合并引用
05-23
React合并引用 React Utility合并引用 :linked_paperclips: npm install react-merge-refs例子 import React from "react" ;import mergeRefs from "react-merge-refs" ;const Example = React . forwardRef ( ...
compose-react-refs:一个小的实用程序，它将两个或多个react refs组合到ref回调中
05-04
一个简单的实用程序，用于将两个或多个（引用对象和回调都受支持并且可以混合）组成一个回调引用。 这使您可以有效地 。 该实用程序不使用，因此可以安全地用于类组件中（甚至在react world之外）。 安装 compose-...
react Refs使用
01-07
//Refs使用，绑定dom元素，ref 不能设置在无状态组件上 //不要在 render 或者 render 之前访问 refs import React, { Component } from 'react'; class Refsdemo extends Component { constructor(props) { super...
react-workshop：这是一个学习如何构建React应用程序的研讨会
01-28
react-workshop：这是一个学习如何构建React应用程序的研讨会
React之props详解
subsistent的博客
04-09 2414
1.props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props纯函数：输入一定，输出一定确定总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件props对象的键值，但是不能直接更改 props。3.通过函数创建的组件，需要通过函数的参数来接收props，通过类创建的组件，需要通过this.props来接收。
react笔记_08类组件的三大属性+函数组件的props
qq_43260366的博客
12-20 681
为什么状态的名字叫做state?因此React中存在内置setState方法去修改state中的数据，并且使用此方法修改setState中的数据之后会驱动试图进行更新；使用setState去修改数据是替换还是合并？使用内置API setState去修改state中的数据，这个数据的修改不是替换而是合并举例说明在初始化时数据state = {isHot:false, xxx:111} 有两条数据当通过this.setState({isHot:true})去修改数据。
【React函数组件+类组件的props属性】
fcc627的博客
08-19 1431
函数组件和类组件的props属性举例说明
React 中利用解构语法 ... 快速方便传递 props 参数
YopenLang的博客
06-24 1370
看着这一坨💩，心情还好React提供了一个叫做解构特性，利用解构操作符（...🧤个人比较推荐使用这种方式，虽然它有一定的理解成本，但是并不高。只要习惯了这种传递方式，就会发现它的优雅和便捷。我是Pandy，一个喜欢英语的程序猿👨‍💻如果你挣扎于看不懂英语官网，或者对英语感冒的话，可以关注公众号哦，我们加入一起充电英语🔌。......
React系列：函数式组件
发果叁
10-26 2899
​ 基于优缺点中的内容，由于Hooks的使用，不具备state和生命周期已经不再是函数式组件的缺陷，所以他们由于内存使用以及更新渲染上的优势，更应该被使用。所以，一般情况下函数式组件是较好的选择，非要使用类组件的时候，也应该使用PureComponent。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
React中props用法详解
月光晒了很凉快的博客
09-22 1247
children 属性，表示组件标签的子节点，当组件标签有子节点时，props 就会有该属性，与普通的 props 一样，其值可以是任意类型。单标签和双标签中没有数据就没有此属性。
propTypes 类型检测
小书包大梦想的博客
06-10 647
自 React v15.5 起，React.propTypes已移入另一个包中，需要引入prop-types库使用。 如果没有安装，请执行以下命令安装依赖： npm install prop-types --save 引入使用： import propTypes from 'prop-types' 简单使用示例： import React from 'react'; import PropTypes from 'prop-types'; // 引入prop-types库 class Pa
父组件如何使用refs获取子组件数据
09-06
首先，在子组件中，你需要给子组件的元素或组件添加一个ref属性，可以是一个字符串或者一个函数。然后，在父组件中，通过refs来访问子组件的数据。 以下是一个示例： ```jsx // 子组件 class ChildComponent ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值