React 中的Props特性及其应用

前端青山2024-11-21 16:15

​🌈个人主页：前端青山

🔥系列专栏：React篇

🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容:React 中的Props特性及其应用

目录

前言

1.1Props详解

[1.2 父子组件通信](#1.2 父子组件通信)

[1.2.1 构建一个父子组件](#1.2.1 构建一个父子组件)

[1.2.2 父组件给子组件传值](#1.2.2 父组件给子组件传值)

[1.2.3 父组件给子组件传值设置默认值](#1.2.3 父组件给子组件传值设置默认值)

[1.2.4 使用prop-types属性验证](#1.2.4 使用prop-types属性验证)

[1.3 props.children](#1.3 props.children)

[1.4 render props特性](#1.4 render props特性)

总结

前言

在 React 开发中，组件复用是一个常见的需求。有时候，我们需要将某个组件的状态或行为共享给其他组件。传统的做法是通过高阶组件（Higher-Order Components, HOC）来实现，但这种方式有时会带来一些复杂性和可读性问题。Render Props 提供了一种更简洁、更灵活的方式来共享组件的状态和行为。本文将详细介绍 Render Props 的概念、实现方法及其应用场景。

1.1Props详解

props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

React 非常灵活，但它也有一个严格的规则：

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

纯函数：输入一定，输出一定确定

总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。

通过箭头函数创建的组件，需要通过函数的参数来接收props

通过类创建的组件，需要通过 this.props来接收

组件可以在其输出中引用其他组件。

这就可以让我们用同一组件来抽象出任意层次的细节。

按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。

1.2 父子组件通信

1.2.1 构建一个父子组件

src/index.js

javascript 复制代码 
import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
import App from './01-App-parent-child'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
复制代码 
​

src/01-App-parent-child.jsx

javascript 复制代码 
import React from 'react'
// ？ 为什么react中组件的首字母必须大写？
// 如果小写，被视为 html 固有的标签，而html固有标签如果没有，则不显示
​
const Header = () => {
  return (
    <header>react 核心库只关注于视图层</header>
  )
}
​
class Content extends React.Component {
  render () {
    return (
      <div>react 16.8 推出了 react hooks</div>
    )
  }
}
​
const Footer = () => {
  return (
    <footer>react真的很简单</footer>
  )
}
​
class App extends React.Component {
  render () {
    return (
      <div>
        <Header></Header>
        <Content></Content>
        <Footer></Footer>
      </div>
    )
  }
}
​
export default App

1.2.2 父组件给子组件传值

src/index.js

javascript 复制代码 
import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
import App from './02-App-parent-child-value'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
复制代码 
​

src/02-App-parent-child-value.jsx

javascript 复制代码 
import React from 'react'
// 父组件在调用子组件的地方，添加自定义的属性，如果属性的值是变量，boolean类型，
// number类型，对象，数组，null，undefined, 函数，需要使用 {} 包裹
​
​
// 如果子组件是类组件，在子组件的内部，可以通过 this.props 访问到父组件传递的数据
// 如果子组件是函数式组件，函数拥有默认参数为props，可以通过 props 访问到父组件传递的数据
​
const Header = (props) => {
  console.log(props) // { name: 'React.js' }
  return (
    <header>{ props.name } 核心库只关注于视图层</header>
  )
}
​
class Content extends React.Component {
  render () {
    console.log(this.props) // {version: 16.8}
    return (
      <div>react { this.props.version } 推出了 react hooks</div>
    )
  }
}
​
const Footer = ({ msg }) => { // 从props对象解构了msg
  return (
    <footer>react真的很{ msg }</footer>
  )
}
​
class App extends React.Component {
  render () {
    return (
      <div>
        <Header name="React.js"></Header>
        <Content version={ 16.8 }></Content>
        <Footer msg="简单"></Footer>
      </div>
    )
  }
}
​
export default App

1.2.3 父组件给子组件传值设置默认值

src/index.js

javascript 复制代码 
import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
import App from './03-App-parent-child-value-default'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
复制代码 
​

src/03-App-parent-child-value-default.jsx

javascript 复制代码 
import React from 'react'
// 父组件在调用子组件的地方，添加自定义的属性，如果属性的值是变量，boolean类型，
// number类型，对象，数组，null，undefined, 函数，需要使用 {} 包裹
​
// 如果子组件是类组件，在子组件的内部，可以通过 this.props 访问到父组件传递的数据
// 如果子组件是函数式组件，函数拥有默认参数为props，可以通过 props 访问到父组件传递的数据
​
// 如果需要给子组件设置默认值
// 不管是类组件 还是 函数式组件，在定义组件之后，添加defaultProps属性即可
// 如果是类组件，还可以通过 类的静态属性 设置默认值
​
const Header = (props) => {
  console.log(props) // { name: 'React.js' }
  return (
    <header>{ props.name } 核心库只关注于视图层</header>
  )
}
Header.defaultProps = {
  name: 'React.js'
}
​
class Content extends React.Component {
  static defaultProps = { // 类的静态属性
    version: 16.8
  }
  render () {
    console.log(this.props) // {version: 16.8}
    return (
      <div>react { this.props.version } 推出了 react hooks!</div>
    )
  }
}
// Content.defaultProps = {
//   version: 16.8
// }
​
const Footer = ({ msg }) => { // 从props对象解构了msg
  return (
    <footer>react真的很{ msg }</footer>
  )
}
Footer.defaultProps = {
  msg: '简单'
}
class App extends React.Component {
  render () {
    return (
      <div>
        {/* <Header name="React.js"></Header>
        <Content version={ 16.8 }></Content>
        <Footer msg="简单"></Footer> */}
        <Header></Header>
        <Content></Content>
        <Footer></Footer>
      </div>
    )
  }
}
​
export default App

1.2.4 使用prop-types属性验证

自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。

复制代码 
$ cnpm i prop-types -D
复制代码 
import PropTypes from 'prop-types';
​
MyComponent.propTypes = {
// 你可以将属性声明为 JS 原生类型，默认情况下
// 这些属性都是可选的。
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
​
// 任何可被渲染的元素（包括数字、字符串、元素或数组）
// (或 Fragment) 也包含这些类型。
optionalNode: PropTypes.node,
​
// 一个 React 元素。
optionalElement: PropTypes.element,
​
// 一个 React 元素类型（即，MyComponent）。
optionalElementType: PropTypes.elementType,
​
// 你也可以声明 prop 为类的实例，这里使用
// JS 的 instanceof 操作符。
optionalMessage: PropTypes.instanceOf(Message),
​
// 你可以让你的 prop 只能是特定的值，指定它为
// 枚举类型。
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
​
// 一个对象可以是几种类型中的任意一个类型
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
​
// 可以指定一个数组由某一类型的元素组成
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
​
// 可以指定一个对象由某一类型的值组成
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
​
// 可以指定一个对象由特定的类型值组成
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
​
// An object with warnings on extra properties
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),
​
// 你可以在任何 PropTypes 属性后面加上 `isRequired` ，确保
// 这个 prop 没有被提供时，会打印警告信息。
requiredFunc: PropTypes.func.isRequired,
​
// 任意类型的必需数据
requiredAny: PropTypes.any.isRequired,
​
// 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
// 请不要使用 `console.warn` 或抛出异常，因为这在 `oneOfType` 中不会起作用。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
  'Invalid prop `' + propName + '` supplied to' +
  ' `' + componentName + '`. Validation failed.'
);
}
},
​
// 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
// 它应该在验证失败时返回一个 Error 对象。
// 验证器将验证数组或对象中的每个值。验证器的前两个参数
// 第一个是数组或对象本身
// 第二个是他们当前的键。
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
  'Invalid prop `' + propFullName + '` supplied to' +
  ' `' + componentName + '`. Validation failed.'
);
}
})
};
​
​

src/index.js

javascript 复制代码 
import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
import App from './04-App-parent-child-value-default-type'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
复制代码 
​

src/04-App-parent-child-value-default-type.jsx

javascript 复制代码 
import React from 'react'
import PropTypes from 'prop-types'
// 父组件在调用子组件的地方，添加自定义的属性，如果属性的值是变量，boolean类型，
// number类型，对象，数组，null，undefined, 函数，需要使用 {} 包裹
​
// 如果子组件是类组件，在子组件的内部，可以通过 this.props 访问到父组件传递的数据
// 如果子组件是函数式组件，函数拥有默认参数为props，可以通过 props 访问到父组件传递的数据
​
// 如果需要给子组件设置默认值
// 不管是类组件 还是 函数式组件，在定义组件之后，添加defaultProps属性即可
// 如果是类组件，还可以通过 类的静态属性 设置默认值
​
// 如果需要验证父组件传递的数据的 数据类型
// 需要通过第三方模块 prop-types 完成
// 不管是类组件还是函数式组件，都是在定义组件之后，完成类型的校验
// 通过 组件.propTypes 完成，写法为对象
// key值为 父组件调用子组件的时候设置的 自定义的属性名
// value 值为 PropTypes.数据类型
​
// 如果自定义的属性值是必须得传递的，那么通过 PropTypes.数据类型.isRequired 完成
// 如果自定义的属性值即可以是 number类型，也可以是stirng类型，
// 通过 PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]) 设置
​
const Header = (props) => {
  console.log(props) // { name: 'React.js' }
  return (
    <header>{ props.name } 核心库只关注于视图层</header>
  )
}
Header.defaultProps = {
  name: 'React.js'
}
Header.propTypes = { // 首字母不大写
  // name: PropTypes.string 
  name: PropTypes.string.isRequired 
}
​
class Content extends React.Component {
  static defaultProps = { // 类的静态属性
    version: 16.8
  }
  render () {
    console.log(this.props) // {version: 16.8}
    return (
      <div>react { this.props.version } 推出了 react hooks!</div>
    )
  }
}
// Content.defaultProps = {
//   version: 16.8
// }
​
Content.propTypes = {
  // version: PropTypes.number
  version: PropTypes.oneOfType([
    PropTypes.number, PropTypes.string
  ])
}
​
const Footer = ({ msg }) => { // 从props对象解构了msg
  return (
    <footer>react真的很{ msg }</footer>
  )
}
Footer.defaultProps = {
  msg: '简单'
}
Footer.propTypes = {
  // msg: PropTypes.bool // Invalid prop `msg` of type `string` supplied to `Footer`, expected `boolean`
  msg: PropTypes.string
}
class App extends React.Component {
  render () {
    return (
      <div>
        {/* <Header name="React.js"></Header>
        <Content version={ 16.8 }></Content>
        <Footer msg="简单"></Footer> */}
        <Header></Header>
        <Content></Content>
        <Footer></Footer>
      </div>
    )
  }
}
​
export default App

1.3 props.children

我们知道使用组件的时候，可以嵌套。要在自定义组件中使用嵌套结构，就需要使用 props.children 。

等同于 vue中的 slot 插槽

src/index.js

javascript 复制代码 
import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
import App from './05-App-props-children'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
​

src/05-App-props-children.jsx

javascript 复制代码 
import React from 'react'
​
const Header = (props) => {
  return (
    <header>1 { props.children }</header>
  )
}
​
class Content extends React.Component {
  render () {
    return (
      <div>2 { this.props.children }</div>
    )
  }
}
​
const Footer = ({ children }) => {
  return (
    <footer>3 { children }</footer>
  )
}
​
class App extends React.Component {
  render () {
    return (
      <div>
        <Header>react 核心库只关注于视图层</Header>
        <Content>react 16.8 推出了 react hooks</Content>
        <Footer>react真的很简单</Footer>
      </div>
    )
  }
}
​
export default App

如果需要给组件添加多个元素，并且显示在多个位置，可以如下设置：

src/index.js

javascript 复制代码 
import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
import App from './06-App-mutiple-props-children'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
复制代码 
​

src/06-App-mutiple-props-children.jsx

javascript 复制代码 
import React from 'react'
​
// vue中 使用 具名插槽（<slot name=""></slot>）
// react 需要依靠 props.children 的下标
const Header = (props) => {
  console.log(props)
  return (
    <header>
      <div>这里输出1的值 { props.children[0] }</div>
      <div>这里输出2的值 { props.children[1] }</div>
      <div>这里输出3的值 { props.children[2] }</div>
    </header>
  )
}
​
class App extends React.Component {
  render () {
    return (
      <div>
        <Header>
          <div>1111111</div>
          <div>2222222</div>
          <div>3333333</div>
        </Header>
      </div>
    )
  }
}
​
export default App

实现类似vue的具名插槽，需要通过 props.children 的下标去访问

1.4 render props特性

使用 Render Props 来解决横切关注点（Cross-Cutting Concerns）

组件是 React 代码复用的主要单元，但如何将一个组件封装的状态或行为共享给其他需要相同状态的组件并不总是显而易见。

以下组件跟踪 Web 应用程序中的鼠标位置:

src/index.js

javascript 复制代码 
import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
import App from './07-App-mouse-tracker'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
​

src/07-App-mouse-tracker.jsx

还没有学习状态state以及事件处理，这里先用

javascript 复制代码 
import { Component } from 'react'
​
// react的事件需要使用 小驼峰 onMouseMove
// 原生js onmounsemove
// react 事件满足两个条件： 第一必须是事件，第二this指向当前的组件
class App extends Component {
  // react 类组件的初始化状态，类似于vue中的data
  state = { 
    x: 0,
    y: 0
  }
​
  render() { 
    return (
      <div style={ { width: '100vw', height: '100vh', backgroundColor: '#f66'} } onMouseMove = { (event) => {
        console.log(event)
        // 修改初始化值
        this.setState({
          x: event.clientX,
          y: event.clientY
        })
      } }>
        <p>
          当前鼠标的位置在，x：{ this.state.x },y: { this.state.y }
        </p>
      </div>
    )
  }
}
 
export default App;

当光标在屏幕上移动时，组件在 <p> 中显示其坐标。

现在的问题是：我们如何在另一个组件中复用这个行为？换个说法，若另一个组件需要知道鼠标位置，我们能否封装这一行为，以便轻松地与其他组件共享它？

render prop 是一个用于告知组件需要渲染什么内容的函数 prop。

src/index.js

javascript 复制代码 
import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
import App from './08-App-render-props'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)
复制代码 
​

src/08-App-render-props.jsx

javascript 复制代码 
import { Component } from 'react'
// 渲染属性共享组件的状态
// 在需要共享的组件（Mouse）上，添加一个render的自定义属性，该属性是一个自定义函数
// 在自定义函数的内部返回需要共享给的那个组件（Cat）
// 在需要共享的组件（Mouse）内部，通过 this.props.render() 或者 props.render() 即可调用，参数即为需要共享的状态
// 那么在定义自定义render属性的函数内部，就会接收到 参数，通过返回的组件（Cat）传递该参数即可
​
const Cat = ({ mounsePointer }) => {
  return (
    <div style={ {
      position: 'fixed',
      left: mounsePointer.x,
      top: mounsePointer.y,
      backgroundColor: '#ccc',
      width: 100,
      height: 100
    } }></div>
  )
}
​
class Mounse extends Component {
  state = { x: 0, y: 0 }
​
  render () {
    return (
      <div style={ { width: '100vw', height: '100vh', backgroundColor: '#f66'} } onMouseMove = { (event) => {
        console.log(event)
        // 修改初始化值
        this.setState({
          x: event.clientX,
          y: event.clientY
        })
      } }>
        <p>
          当前鼠标的位置在，x：{ this.state.x },y: { this.state.y }
​
        </p>
        { this.props.render(this.state) }
      </div>
    )
  }
}
class App extends Component {
  render () {
    return (
      <div>
        {/* <Mounse></Mounse>
        <Cat ></Cat> */}
        <Mounse render = { (mounsePointer) => {
          return <Cat mounsePointer = { mounsePointer }/>
        } }></Mounse>
      </div>
    )
  }
}
​
export default App

此案例实际上完成了react中子组件给父组件传值

总结

通过 Render Props，我们可以将组件的状态或行为轻松地共享给其他组件，从而提高代码的复用性和可维护性。本文通过一个具体的例子------鼠标位置跟踪组件，展示了如何使用 Render Props 实现状态共享。希望本文能够帮助读者更好地理解和应用 Render Props，提升 React 应用的开发效率。

相关推荐
不徐耍赖19 分钟前
如何利用CSS制作导航菜单
前端·css
ᝰꫝꪉꪯꫀ36120 分钟前
JavaWeb——HTML、CSS与JS
java·前端·javascript·css·后端·html
隔壁小c不秃头21 分钟前
[webgis 0基础到找工作]------JavaScript--Bom day12
开发语言·前端·javascript
汪洪墩22 分钟前
【Mars3d】实现这个地图能靠左，不居中的样式效果
前端·javascript·vue.js·3d·webgl·cesium
野槐32 分钟前
Vue3踩坑记录
开发语言·前端·javascript
m0_6925400739 分钟前
css 布局学习之底部弹窗切换示
前端·css·学习
sunly_40 分钟前
Flutter：photo_view图片预览功能
android·javascript·flutter
Z_Wonderful41 分钟前
React 远程仓库拉取项目部署，无法部署问题
前端·javascript·react.js
Fanfffff72043 分钟前
React中组件通信的几种方式
前端·react.js·前端框架
生椰拿铁You1 小时前
03 —— Webpack 自动生成 html 文件
前端·webpack·node.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04机器人持续学习基准LIBERO系列10——文件结构05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07小米路由器简单救砖08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10华为AI战略的CANN