React中props使用介绍

目录
  • 1.继续深入state
  • 2.props
  • 3.限制Props的传递类型
  • 4.函数接收props参数
  • 5.插槽

1.继续深入state

state有两种用法:

setState({}) 和 setState(()=>{})

第一种用法本质是:我写了这个属性,然后进行覆盖操作。

第二种用法好处是:回调函数中的第一个参数是state。这样的话看起来获取到原先state上的数据也更加简单!

setState修改数据实现响应式的本质

在每次修改之后,会重新调用render函数。

2.props

什么是props?

​ props 是组件传递的参数。子组件通过this.props来接受!

在类组件中:

props通过子组件的this.props来接受父组件传过来的props值。

组件是可以复用的,最常见的就是循环来使用。与Vue不同的是:React他没有指令这一说法。jsx语法会自动循环数组。通常处理数组都采用高阶函数。例如

没有循环的用法:

 <div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子组件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子组件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年龄: {age}</div>
                    <div>性别: {sex}</div>
                </div>
            }
        }
        // 父组件
        class Demo extends React.Component {
            state = {
                arr: [
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    }
                ]
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo组件</h1>
                        <hr />
                        <Info name="耀阳" age="18" sex="男"></Info>
                        <Info name="吕德华" age="18" sex="男"></Info>
                        <Info name="北幕" age="18" sex="男"></Info>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

有循环的用法

  <div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子组件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子组件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年龄: {age}</div>
                    <div>性别: {sex}</div>
                </div>
            }
        }
        // 父组件
        class Demo extends React.Component {
            state = {
                arr: [
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    }
                ]
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo组件</h1>
                        <hr />
                        {
                            this.state.arr.map(item => <Info name={item.name} age={item.age} sex={item.sex} ></Info>)
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

Props几个特点:

子组件不能修改传递的Props数据,只能由父组件来修改,或者从数据的源头来修改。

父组件传递参数,可以是其他的类型,利用jsx语法:{},跟vue的插值语法类似:都是js表达式!

父组件传递多个数据{…obj}

对象解构还是对象!!!

<div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子组件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子组件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年龄: {age}</div>
                    <div>性别: {sex}</div>
                </div>
            }
        }
        // 父组件
        class Demo extends React.Component {
            state = {
                obj: {
                    name: "耀阳1", age: "18", sex: "男"
                }
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo组件</h1>
                        <hr />
                        <Info {...this.state.obj}></Info>
                        <Info name="吕德华" age="18" sex="男"></Info>
                        <Info name="北幕" age="18" sex="男"></Info>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

3.限制Props的传递类型

子组件接收父组件的类型,父组件可以随意的定义,

​ a. 子组件限制父组件传递的数据类型

​ b. 引入prop-types库

​ c. 需要在类上设置一个属性 propTypes,谁想限制给谁设置。写在类上面方法(静态方法)

​ d. 设置默认值 defaultProps = {}

这个不需要记住,用的时候查阅即可!

限制类型的简写:可以使用static静态方法。

4.函数接收props参数

函数中的state在hook中才能使用。暂时先不考虑。

函数的第一个参数就是props,在函数中只需要用第一个参数来接受即可

5.插槽

props下面的Childrene

到此这篇关于React中props使用介绍的文章就介绍到这了,更多相关React props内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React 中state与props更新深入解析

    目录 正文 组件的 updater 处理 ClickCounter Fiber 的 update beginWork Reconciling children for the ClickCounter Fiber 处理 Span Fiber 的 update Reconciling children for the span fiber Effects list commit 阶段 应用 effects DOM updates 调用 Post-mutation 生命周期 正文 在这篇文章中,我使

  • React和Vue的props验证示例详解

    目录 React中的props校验 react中单一类型校验器 设定属性类型和默认值 设置必需属性 react中组合类型校验器 PropTypes.oneOfType PropTypes.arrayOf PropTypes.objectOf PropTypes.shape PropTypes.node vue数据验证:通过变量名:具体类型的方法 vue数据验证:带有默认值的方式验证 通过required设置必须属性 多种类型中的一种 对象数组验证,并且数组元素是特定属性的对象 自定义验证函数 V

  • vue和react中props变化后如何修改state

    目录 vue和react中props变化后修改state 改进 react改变state必须知道的知识点 1.不能直接修改state 2.state的更新是异步的 3.state的更新是一个合并的过程 state与不可变对象 vue和react中props变化后修改state 如果只想在 state 更改时重新计算某些数据,比如搜索框案例. vue <template> <div> <input type="text" v-model="filt

  • React RenderProps模式超详细讲解

    目录 正文 使用Render Props来完成关注点分离 render prop的prop名不一定叫render 注意点 render prop是一个技术概念.它指的是使用值为function类型的prop来实现React component之间的代码共享. 如果一个组件有一个render属性,并且这个render属性的值为一个返回React element的函数,并且在组件内部的渲染逻辑是通过调用这个函数来完成的.那么,我们就说这个组件使用了render props技术. <DataProvi

  • React中props使用教程

    目录 1. children 属性 1.1 React.cloneElement方法 1.2 React.Children.map方法 2. 类型限制(prop-types) 3. 默认值(defaultProps) 1. children 属性 概述: children 属性,表示组件标签的子节点,当组件标签有子节点时,props 就会有该属性,与普通的 props 一样,其值可以是任意类型.单标签和双标签中没有数据就没有此属性. 语法: # 父组件 class App extends Rea

  • React 高阶组件与Render Props优缺点详解

    目录 高阶组件 增强型高级组件 注入型高阶组件 高阶组件 VS Render Props 总结 高阶组件 高阶组件(HOC)是一个接受组件作为参数并返回一个新组件的函数,如果多个组件有相同的逻辑,将这些逻辑用函数封装,使它们能跨组件共用,这种用法称为高阶组件.下面的代码演示什么是高阶组件: export default function WithPrintLog(InnerComponent) { return class extends React.Component{ componentDi

  • 详解React中Props的浅对比

    上一周去面试的时候,面试官我PureComponent里是如何对比props的,概念已经牢记脑中,脱口而出就是浅对比,接着面试官问我是如何浅对比的,结果我就没回答上来. 趁着周末,再来看看源码里是如何实现的. 类组件的Props对比 类组件是否需要更新需要实现shouldComponentUpdate方法,通常讲的是如果继承的是PureComponent则会有一个默认浅对比的实现. // ReactBaseClasses.js function ComponentDummy() {} Compo

  • Vue中props用法介绍

    ​前言: 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据. 实例演示: 子组件: <template> <div> <h3>我是{{name}},今年{{age}}岁,爱好:{{hobby}}</h3>,{{flag}} </div> </template> <script&

  • react中props 的使用及进行限制的方法

    组件的props( props是一个对象 ) 作用:接收传递给组件的数据 特点: 可以给组件传递任意类型的数据 props是只读的对象,只能读取属性的值,无法修改对象 注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到 props props 的使用 <div id="test1"></div> <div id="test2"></div> <div id=&

  • react中hook介绍以及使用教程

    前言 最近由于公司的项目开发,就学习了在react关于hook的使用,对其有个基本的认识以及如何在项目中去应用hook.在这篇博客中主要从以下的几个点进行介绍: hook简介 hook中常用api的使用 hook在使用过程中需要去注意的地方 hook中怎样去实现class组件中的声明周期函数 hook 首先介绍关于hook的含义,以及其所要去面对的一些场景 含义:Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

  • React中10种Hook的使用介绍

    目录 React Hook是什么? React目前提供的Hook 1.useState 2.useEffect & useLayoutEffect 3.useMemo & useCallback 4.useRef 5.useContext 6.useReducer React Hook是什么? React官网是这么介绍的: Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 完全可选的 你无需重写任何已有

  • React中DOM事件和状态介绍

    目录 DOM事件 参数 作用域 状态 无状态组件 有状态组件 使用状态数据 初始化状态数据 修改状态数据 DOM事件 react中绑定事件的语法跟html中为元素绑定事件的语法相似, html中绑定事件: <div onclick="fn"></div>     react中绑定事件 <div onClick={this.fn}></div> 注意: 1 事件名称首字母必须大写 2 事件回调函数定义在组件中,我们通过插值语法引入绑定 3

  • react中的watch监视属性-useEffect介绍

    目录 react的watch监视属性-useEffect useEffect使用指南 最基本的使用 响应更新 如何处理Loading和Error 处理表单 自定义hooks 使用useReducer整合逻辑 取消数据请求 react的watch监视属性-useEffect 在vue中可以使用watch属性,去监视一个值,当这个值进行变化的时候就去执行一些操作.在react是没有这个属性的,但是它也一样可以达到相同的效果,那么接下来看看它是怎么实现的呢? 在react中实现监听效果有一个比较简单的

随机推荐