首页 > 资讯 > 前端开发 > JavaScript >React props全面详细解析

101

分享到

React props全面详细解析

React props React props的使用 2022-11-13 18:11:16 101人浏览薄情痞子

摘要

目录一、Props 是什么二、props children模式1. props 插槽组件2. render props模式3. render props模式三、进阶实践一、Props

一、Props 是什么

先来看一个 demo ：

function Chidren(){
  return <div> 我是子组件 </div>
}

function Father(props) {
      const {  children , mes , renderName , say ,Component } = props
      const renderFunction = children[0]
      const renderComponent = children[1]
      
      return (
        <div>
            { renderFunction() }
            { mes }
            { renderName() }
            { renderComponent }
            <Component />
            <button onClick={ () => say() } > 触发更改 </button>
        </div> )
}

class App extends React.Component{
  state={  
      mes: "hello,React"
  }
  node = null
  say= () =>  this.setState({ mes:'let us learn React!' })
  render(){
      return <div>
          <Father  
             mes={this.state.mes}  // ① props 作为一个渲染数据源
             say={ this.say  }     // ② props 作为一个回调函数 callback
             Component={ Chidren } // ③ props 作为一个组件
             renderName={ ()=><div> my name is YinJie </div> } // ④ props 作为渲染函数
          >
              { ()=> <div>hello,world</div>  } {  }
              <Chidren />             {  }
          </Father>
      </div>
  }
}

我们看一下输出结果：

当点击触发更改时就能够调用回调更改数据源：

所以 props 可以是：

① props 作为一个子组件渲染数据源。

② props 作为一个通知父组件的回调函数。

③ props 作为一个单纯的组件传递。

④ props 作为渲染函数。

⑤ render props ，和④的区别是放在了 children 属性上。

⑥ render component 插槽组件。

二、props children模式

我们先来看看 prop + children 的几个基本情况：

1. props 插槽组件

<Container>
    <Children>
</Container>

上述可以在 Container 组件中，通过 props.children 属性访问到 Children 组件，为 React element 对象。

作用：

可以根据需要控制 Children 是否渲染。
像上一节所说的， Container 可以用 React.cloneElement 强化 props (混入新的 props )，或者修改 Children 的子元素。

举一个用React.cloneElement 强化 props 的例子，多用于编写组件时对子组件混入新的 props，下面我们要做一个导航组件，我们希望它的结构如下：

<Menu>
    <MenuItem >
        active
    </MenuItem>
    <MenuItem>
        disabled
    </MenuItem>
    <MenuItem >
        xyz
    </MenuItem>
</Menu>

我们想给每个 MenuItem 子组件都添加 index 属性，这个事情不应该让用户手动添加，最好是可以在 Menu 组件中自动为每个 MenuItem 子组件添加上，并且 Menu 组件还应该判断子组件的类型，如果子组件的类型不是 MenuItem 组件就报错。

Menu.tsx：

const Menu: React.FC<MenuProps> = (props) => {
    // ... 一些操作
    const renderChildren = () => { // 让子级的children都是 menuItem，有不是的就报错
        return React.Children.map(children, (child, index) => {
            const childElement = child as React.FunctionComponentElement<MenuItemProps>
            const { displayName } = childElement.type
            if(displayName === 'MenuItem' || displayName === "SubMenu") {
                return React.cloneElement(childElement, { index: index.toString() })
            } else {
                console.error('warning: Menu has a child whitch is not a MenuItem')
            }
        })
    }
    return (
        <ul className={classes} style={style} data-testid="test-menu">
            <MenuContext.Provider value={passedContext}>
                {renderChildren()}
            </MenuContext.Provider>
        </ul>
    )
}

在 Menu 组件中我们通过 React.children.map 来循环子组件，通过 child.type 可以获取到每个子组件的 displayName 静态属性，这个在子组件中有定义：

通过子组件的 displayName 来判断是否是我们需要的 MenuItem，如果是的话就调用 React.cloneElement 来为子组件添加 index 属性。

2. render props模式

<Container>
   { (ContainerProps)=> <Children {...ContainerProps}  /> }
</Container>

这种情况，在 Container 中， props.children 属性访问到是函数，并不是 React element 对象，我们应该调用这个函数：

function  Container(props) {
    const  ContainerProps = {
        name: 'alien',
        mes:'let us learn react'
    }
     return  props.children(ContainerProps)
}

这种方式作用是：

1 根据需要控制 Children 渲染与否。

2 可以将需要传给 Children 的 props 直接通过函数参数的方式传递给执行函数 children 。

3. render props模式

如果 Container 的 Children 既有函数也有组件，这种情况应该怎么处理呢？

<Container>
    <Children />
    { (ContainerProps)=> <Children {...ContainerProps} name={'haha'}  />  }
</Container>

const Children = (props)=> (<div>
    <div>hello, my name is {  props.name } </div>
    <div> { props.mes } </div>
</div>)
function  Container(props) {
    const ContainerProps = {
        name: 'alien',
        mes:'let us learn react'
    }
     return props.children.map(item=>{
        if(React.isValidElement(item)){ // 判断是 react elment  混入 props
            return React.cloneElement(item,{ ...ContainerProps },item.props.children)
        }else if(typeof item === 'function'){
            return item(ContainerProps)
        }else return null
     })
}
const Index = ()=>{
    return <Container>
        <Children />
        { (ContainerProps)=> <Children {...ContainerProps} name={'haha'}  />  }
    </Container>
}

这种情况需要先遍历 children ，判断 children 元素类型：

针对 element 节点，通过 cloneElement 混入 props ；
针对函数，直接传递参数，执行函数。

三、进阶实践

实现一个简单的<FORM> <FormItem>嵌套组件

接下来到实践环节了。需要编写一个实践 demo ，用于表单状态管理的<Form>和<FormItem>组件

<Form>用于管理表单状态；
<FormItem>用于管理<Input>输入框组件。,

编写的组件能够实现的功能是：

①Form组件可以被 ref 获取实例。然后可以调用实例方法submitForm获取表单内容，用于提交表单，resetForm方法用于重置表单。

②Form组件自动过滤掉除了FormItem之外的其他React元素

③FormItem中 name 属性作为表单提交时候的 key ，还有展示的 label 。

④FormItem可以自动收集<Input/>表单的值。

App.js：

import React, { useState, useRef } from "react";
import Form from './Form'
import FormItem from './FormItem'
import Input from './Input'
function App () {
  const form =  useRef(null)
  const submit =()=>{
      
      form.current.submitForm((formValue)=>{ // 调用 form 中的submitForm方法
          console.log(formValue)
      })
  }
  const reset = ()=>{
      
      form.current.resetForm() //调用 form 中的 resetForm 方法
  }
  return <div className='box' >
      <Form ref={ form } >
          <FormItem name="name" label="我是"  >
              <Input   />
          </FormItem>
          <FormItem name="mes" label="我想对大家说"  >
              <Input   />
          </FormItem>
          <FormItem name="lees" label="ttt"  >
              <Input   />
          </FormItem>
      </Form>
      <div className="btns" >
          <button className="searchbtn"  onClick={ submit } >提交</button>
          <button className="concellbtn" onClick={ reset } >重置</button>
      </div>
  </div>
}
export default App

Form.js:

class Form extends React.Component{
    state={
        formData:{}
    }
    
    submitForm=(cb)=>{
        cb({ ...this.state.formData })
    } 
    
    resetForm=()=>{
       const { formData } = this.state
       Object.keys(formData).forEach(item=>{
           formData[item] = ''
       })
       this.setState({
           formData
       })
    }
    
    setValue=(name,value)=>{
        this.setState({
            formData:{
                ...this.state.formData,
                [name]:value
            }
        })
    }
    render(){
        const { children } = this.props
        const renderChildren = []
        React.Children.forEach(children,(child)=>{
            if(child.type.displayName === 'formItem'){
                const { name } = child.props
                
                const Children = React.cloneElement(child,{ 
                    key:name ,                             
                    handleChange:this.setValue ,           
                    value:this.state.formData[name] ||  '' 
                },child.props.children)
                renderChildren.push(Children)
            }
        })
        return renderChildren
    }
}

Form.displayName = 'form'

设计思想：

首先考虑到<Form>在不使用forwardRef前提下，最好是类组件，因为只有类组件才能获取实例。
创建一个 state 下的 formData属性，用于收集表单状态。
要封装重置表单，提交表单，改变表单单元项的方法。
要过滤掉除了FormItem元素之外的其他元素，那么怎么样知道它是不是FormItem，这里教大家一种方法，可以给函数组件或者类组件绑定静态属性来证明它的身份，然后在遍历 props.children 的时候就可以在 React element 的 type 属性(类或函数组件本身)上，验证这个身份，在这个 demo 项目，给函数绑定的 displayName 属性，证明组件身份。
要克隆FormItem节点，将改变表单单元项的方法 handleChange 和表单的值 value 混入 props 中。

FormItem.js：

function FormItem(props){
    const { children , name  , handleChange , value , label  } = props
    const onChange = (value) => {
        
        handleChange(name,value)
    }
   return <div className='form' >
       <span className="label" >{ label }:</span>
       {
            React.isValidElement(children) && children.type.displayName === 'input' 
            ? React.cloneElement(children,{ onChange , value })
            : null
       }
   </div>    
}
FormItem.displayName = 'formItem'

设计思想：

FormItem一定要绑定 displayName 属性，用于让<Form>识别<FormItem />
声明onChange方法，通过 props 提供给<Input>，作为改变 value 的回调函数。
FormItem过滤掉除了input以外的其他元素。

Input.js：


function Input({ onChange , value }){
    return  <input className="input"  onChange={ (e)=>( onChange && onChange(e.target.value) ) } value={value}  />
}

Input.displayName = 'input'

设计思想：

绑定 displayName 标识input。
inputDOM 元素，绑定 onChange 方法，用于传递 value 。

下面通过函数组件再重写一下：

App.js，FormItem.js 和 Input.js 还是一样的，Form.js使用了 hooks 钩子来管理状态，并且通过forwardRef, useImperativeHandle，让 App 组件访问到 Form 中的方法：

import React, { useState, forwardRef, useImperativeHandle } from "react"
const Form = (props, ref) =>{
    const { children } = props
    const [ formData, setFormData ] = useState({})
    useImperativeHandle(ref, () => ({
        submitForm: submitForm,
        resetForm: resetForm
    }))
    
    const submitForm=(cb)=>{
        cb(formData)
    } 
    
    const resetForm=()=>{
        const newData = formData
       Object.keys(newData).forEach(item=>{
          newData[item] = ''
       })
       setFormData(newData)
    }
    
    const setValue=(name,value)=>{
        setFormData({
            ...formData,
            [name]:value
        })
    }
    const renderChildren = () => {
        return React.Children.map(children,(child)=>{
            if(child.type.displayName === 'formItem'){
                const { name } = child.props
                
                const Children = React.cloneElement(child,{ 
                    key:name ,                             
                    handleChange: setValue ,           
                    value: formData[name] ||  '' 
                },child.props.children)
                return Children
            }
        })
    }
    return ( 
          renderChildren()
        )
}

Form.displayName = 'form'
export default forwardRef(Form)

启动项目，查看效果：

点击提交，我们在输入框里输入的内容就能显示在控制台上。

为了体现出咱们这个嵌套组件的高可复用性，我们可以在根组件中随意添加子项：

到此这篇关于React props全面详细解析的文章就介绍到这了,更多相关React props内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React props全面详细解析

本文链接: https://www.lsjlt.com/news/169907.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React props全面详细解析

目录一、Props 是什么二、props children模式1. props 插槽组件2. render props模式3. render props模式三、进阶实践一、Props...

99+

2022-11-13

React props React props的使用
react的context和props详解

目录一、context1. 使用场景2. 使用步骤3. 总结二、props深入1. children 属性2. props 校验3. props校验使用步骤4. props校验约束规...

99+

2024-04-02
详细全面解析Java泛型

1.概述作为一个面向对象的编程语言，Java可以通过实现一些类，作为我们各种需求的一个模板，方便我们的使用。但有时候，这个类的范围可能比我们想要的范围要大，我们只想限定于满足类的某...

99+

2024-04-02
详解React中Props的浅对比

目录类组件的Props对比 shallowEqual 浅对比函数组件的浅对比上一周去面试的时候，面试官我PureComponent里是如何对比props的，概念已经牢记脑中，脱口而...

99+

2024-04-02
React全面解析excel文件

目录React解析excel文件React上传excel预览React解析excel文件首先安装安装xlsx插件 yarn add xlsx 使用xlsx解析 c...

99+

2024-04-02
React Native 启动流程详细解析

导读：本文以 react-native-cli 创建的示例工程（安卓部分）为例，分析 React Native 的启动流程。工程创建步骤可以参考官网。本文所分析 React Nat...

99+

2024-04-02
React和Vue的props验证示例详解

目录React中的props校验react中单一类型校验器设定属性类型和默认值设置必需属性react中组合类型校验器PropTypes.oneOfTypePropTypes.arra...

99+

2022-11-13

Vue props验证 react props验证
react组件实例属性props实例详解

目录react组件实例属性propspropsprops简单使用props批量操作props属性类型限制props属性限制的简写函数组件使用props补充：React之组件实例的三大...

99+

2023-01-30

react组件实例属性props react props
React三大属性之props的使用详解

目录类组件函数组件props是只读的组件间通信上期讲了state，接下来讲讲props。props功能在于组件间通信（父子组件），首先说说在各种组件中的用法：类组件 //父...

99+

2024-04-02
React Hook中的useState函数的详细解析

useState => 让函数组件具有维持状态的能力useState 这个 Hook 是用来管理 state 的，它可以让函数组件具有维持状态的能力。即在一个函数组件的多次渲染...

99+

2022-11-13

React Hook useState函数 React Hook
React 高阶组件与Render Props优缺点详解

目录高阶组件增强型高级组件注入型高阶组件高阶组件 VS Render Props总结高阶组件高阶组件（HOC）是一个接受组件作为参数并返回一个新组件的函数，如果多个组件有相同的逻辑...

99+

2022-11-16

React 高阶组件 Render Props Render Props
React diff算法面试考点超详细讲解

目录前言diff算法的概念手写diff算法的过程前言在前端工程上，日益复杂的今天，性能优化已经成为必不可少的环境。前端需要从每一个细节的问题去优化。那么如何更优，当然与他的如何怎么...

99+

2022-12-19

React diff算法原理 React diff算法源码
React中的Props类型校验和默认值详解

目录一、props规则校验二、props默认值1.函数式默认值1.1 函数参数默认值（新版推荐）1.2 defaultProps 设置默认值2.类式默认...

99+

2024-04-02
React框架核心原理全面深入解析

目录前言第一章基本概念第二章 createElement 函数第三章 render函数第四章 Concurrent Mode第五章 Fibers第六章 Render and Com...

99+

2022-11-16

React框架的原理 React框架核心
C语言数组全面详细讲解

目录1.基础知识2.数组的分类2.1按元素类型分类2.2按维数分类3.数组定义和初始化3.1 一维数组3.2 二维数组4.数组元素的引用方法5.字符数组的定义1.基础知识 C语言中使...

99+

2024-04-02
全面分析MySQL的细节

本篇内容主要讲解“全面分析MySQL的细节”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“全面分析MySQL的细节”吧!一、EXPLAIN做MySQL优化，我们要...

99+

2024-04-02
JWT全面解读和详细使用步骤

目录前言JWT的数据结构HeaderPayloadSignatureBase64URLJWT的实现Maven依赖JWT签名发布和验证代码拦截器配置无需认证的请求Token统一拦截器代...

99+

2024-04-02
React diff算法超详细讲解

目录diff 算法介绍diff 策略tree diffcomponent diffelement diff结合源码看 diff整体流程新内容为 REACT_ELEMENT_TYPE新...

99+

2022-11-13

React diff算法原理 React diff算法源码
React超详细分析useState与useReducer源码

目录热身准备为什么会有hookshooks执行时机两套hookshooks存储初始化 mountuseStatemountWorkInProgressHook更新updateupda...

99+

2022-11-13

React useState与useReducer React useState React useReducer
window.history详细解析

window.history是JavaScript中的一个对象，表示浏览器的历史记录。它提供了一些方法和属性，允许开发人员在浏览器历...

99+

2023-09-13

解析