React之组件通信与插槽

最新推荐文章于 2024-06-29 15:36:02 发布
最新推荐文章于 2024-06-29 15:36:02 发布
阅读量264 收藏 1
点赞数 2
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/byyourself10/article/details/134012207
版权
本文详细介绍了React中的组件通信，包括DOM组件的Props设置、类属性和Style属性的使用，以及React组件的Props传递、组件复用、插槽功能和Context在多级组件间的数据传递。展示了如何通过Props进行组件间的交互和自定义内容传递。
摘要由CSDN通过智能技术生成

一、组件通信

React中组件分为两种类型：一种是React Dom组件，一种是React组件。
Dom组件指的是React支持的所有的HTML和SVG标签。

function App() {
  return (
    <div>
      <img 
      src=""
      alt=""
      >
      </img>
    </div>
  );
}

export default App;

在这里插入图片描述
上图为纯HTML的写法，但是在React中，这些属性不是纯HTML写法，它会有一些变化，像上图中HTML属性的功能，在React中称为Props。

1.为DOM组件设置Props

props可以理解为道具，也可以理解为属性，像Properties。
在React Props的使用中，跟HTML属性使用是有一些区别的。
如以下例子：

import image from './logo.svg'
function App() {
  return (
    <div>
      <img 
      src={image} 
      alt=""
      >
      </img>
    </div>
  );
}

export default App;

在这里插入图片描述

1.1 DOM组件的类属性

类属性也就是CSS类名，类名的名称叫做class，但由于在React中使用的是JSX语法，所以它可能会牵扯到跟JS关键字class重名的情况，在React中进行类名设置的话需要更改为另外一个名字叫做className。

import image from './logo.svg'

function App() {
  return (
    <div>
      <img 
      src={image} 
      alt=""
      className="small"
      >
      </img>
    </div>
  );
}

export default App;

在这里插入图片描述
在这里插入图片描述
但如果在React直接设置class会直接报错。
在这里插入图片描述

1.2 DOM组件的Style属性

在React使用JSX的时候，由于style是一种键值的结构，所以JSX允许你通过键值对，就是对象的形式来进行style设置。

import image from './logo.svg'
function App() {
  return (
    <div>
      <img 
      src={image} 
      alt=""
      className="small"
      style={{
        width:'200vh',
        height:200,
        backgroundColor:'grey'
       }}
      >
      </img>
    </div>
  );
}

export default App;

在这里插入图片描述
也可以书写变量放入style大括号中

import image from './logo.svg'

function App() {
  const imgStyleObj={
    width:'200vh',
    height:200,
    backgroundColor:'grey'
  }
  return (
    <div>
      <img 
      src={image} 
      alt=""
      className="small"
      style={imgStyleObj}
      >
      </img>
    </div>
  );
}

export default App;

在这里插入图片描述

1.3 JSX的展开语法

如果我们给一个标签进行过多不必须的属性设置的话，我们这样写是比较繁琐的，所以JSX还支持一种展开语法。

import image from './logo.svg'

function App() {
  const imgData={
    className:"small",
    style:{
      width:'200vh',
      height:200,
      backgroundColor:'grey'
    }
  }
  return (
    <div>
      <img 
      src={image} 
      alt=""
      {...imgData}
      >
      </img>
    </div>
  );
}

export default App;

小贴士：JSX的展开操作并不是ES6的展开运算符。
它的功能是将当前对象的键值直接放到这个位置上，它是不能再一个没有容器的地方单独使用的。它是相当于把当前对象的属性拿出来，又放在一个对象字面量中组成了一个新的对象，也是我们对象进行拷贝的一种方案。
但在React中标签里大括号只是JSX的语法标记，就算去掉大括号也不可能直接放在img标签中，所以这块只能大括号处理，是JSX单独的功能支持。

2.React组件的Props

我们自定义的React组件
可以实现组件复用，例子如下

function Article (params) {
  return (
       <div>
          <h2>标题1</h2>
          <p>内容</p>
       </div>
  )
}

export default function App() {
  return (
    <>
      <Article />
      <Article />
      <Article />
    </>
  )
}

在这里插入图片描述
不过会有另外一个问题，当进行组件复用的时候，通常只是我们的结构样式逻辑进行复用，内容是不可能复用的，所以我们希望对组件的一些内容进行一些定制。
操作步骤：
1.请求功能所需的数据（例如文章信息）
2.创建Article组件
3.将文章的数据分别传递给Article
采用的方式就是通过props，我们既可以给DOM组件传递props来进行标签功能设置，也可以给React组件进行数据传递，这也是组件通信中父组件向子组件进行传值的一种方式。

function Article ({title,content,active}) {
  return (
       <div>
          <h2>{title}</h2>
          <p>{content}</p>
          <p>状态：{active?'显示中':'隐藏中'}</p>
       </div>
  )
}

export default function App() {
  return (
    <>
      <Article  title="标题1" content="内容1" active/>
      <Article  title="标题2" content="内容2"/>
      <Article  title="标题3" content="内容3" active/>
    </>
  )
}

在这里插入图片描述

2.1 在React组件中展开Props的使用场景

可能文章内容会有更多的不同个性化细节，比如标题的区域，作者的信息，发布时间等等，内容区域可能会有像图像，各种区域的展示（基于多种子组件），也有可能将标题和内容区域做单独的封装，因为内容区域是一个文本呈现，或者需要其他的功能组件来参与，这时候固定就不太方便了，就需要再嵌套一个Detail组件处理，就需要展开Props。

function Detail({content,active}) {
  return (
    <>
      <p>{content}</p>
      <p>状态：{active?'显示中':'隐藏中'}</p>
    </>
  )
}

function Article ({title,detailData}) {
  return (
       <div>
          <h2>{title}</h2>
          <Detail {...detailData} />
       </div>
  )
}

export default function App() {
  const articleData={
    title:'标题1',
    detailData:{
      content:'内容1',
      active:true
    }
  }
  return (
    <>
      <Article  {...articleData}/>
    </>
  )
}

在这里插入图片描述

3.将JSX作为Props传递（组件插槽）

组件插槽是在组件中定义的具有特定名称的标记，允许用户在组件使用时插入自定义内容。组件插槽允许用户通过将自定义内容嵌入到组件中来更改组件的外观和行为，从而提高组件的灵活性和可重用性。组件插槽在构建可复用组件库时非常有用，可以帮助开发人员提高代码复用性。

function List({children}) {
  return (
    <ul>
      {children}
    </ul>
  )
}

export default function App() {
  return (
    <>
      <List>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
      </List>
      <List>
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
      </List>
    </>
  )
}

在这里插入图片描述
利用JSX语法实现了所谓的一个叫插槽的概念，所以在react中，你几乎看不到关于插槽这两个字，因为它就是使用了JSX语法，所以React中讲插槽功能称为将JSX作为props传递给子组件，它和普通prop的区别在于它是被预定义了一个属性叫做children。

3.1 向多个位置传递JSX

除了希望向某一个地方进行插入，还希望在列表顶部或者底部在做一个内容呈现。

function List({children,title,footer=<div>默认底部</div>}) {
  return (
    <>
    <h2>{title}</h2>
    <ul>
      {children}
    </ul>
    {footer}
    </>
  )
}

function Li({children}) {
  const listContent = children.map(item=>
    <li key={item.id}>{item.content}</li>
    )
  return (
    <>
     {listContent}
    </>
  )
}

export default function App() {
  const listData=[
    {
      id:1,
      title:'列表1',
      footer:<p>这是底部内容1</p>,
      listContent:[
        {
        id:1,content:'内容1'
      },
      {
        id:2,content:'内容2'
      },
      {
        id:3,content:'内容3'
      }
    ]
    },
    {
      id:2,
      title:'列表2',
      footer:<p>这是底部内容2</p>,
      listContent:[
        {
        id:1,content:'内容A'
      },
      {
        id:2,content:'内容B'
      },
      {
        id:3,content:'内容C'
      }
    ]
    },
    {
      id:3,
      title:'列表3',
      // footer:<p>这是底部内容2</p>,
      listContent:[
        {
        id:1,content:'内容X'
      },
      {
        id:2,content:'内容Y'
      },
      {
        id:3,content:'内容Z'
      }
    ]
    }
  ]

  const list = listData.map(item=>
    <List title={item.title} footer={item.footer}>
      <Li children={item.listContent}></Li>
    </List>
  )
  return (
    <>
       {list}
    </>
  )
  // return (
  //   <>
  //     <List title="列表1" footer={<p>这是底部内容1</p>}>
  //       <li>内容1</li>
  //       <li>内容2</li>
  //       <li>内容3</li>
  //     </List>
  //     <List  title="列表2" footer={<p>这是底部内容2</p>}>
  //       <li>内容A</li>
  //       <li>内容B</li>
  //       <li>内容C</li>
  //     </List>
  //     <List  title="列表3">
  //       <li>内容X</li>
  //       <li>内容Y</li>
  //       <li>内容Z</li>
  //     </List> 
  //   </>
  // )
}

在这里插入图片描述
最后props的传值都是单向的，而且父组件向子组件传的值都是只读的。

4.子组件向父组件传值

需要父组件向子组件进行一个自定义事件的设置，然后通过事件触发后，向我们父组件传递参数的方式来进行实现。

import { useState } from "react";

function Detail({onActive}) {
  const [status,setStautus]=useState(false)
  function handeClick(){
    setStautus(!status)
    onActive(status)
  }
  return(
    <div>

      <button onClick={handeClick}>按钮</button>
      <p style={{display:status?'block':'none'}}>Detail的内容</p>
    </div>
  )
}


function App() {
  function handleActive(status) {
    console.log(status);
  }
  return (
  <>
  <Detail onActive={handleActive}/>
  </>
  );
}

export default App;

在这里插入图片描述

5.使用Context进行多级组件传值

如果组件层级比较多，要进行数据传递的话，那肯定会经历一级一级数据传递，prop用起来就比较麻烦，我们就可以利用一个React中的Hooks Context进行操作。

import { createContext,useContext } from "react"
const LevelContext = createContext(0)

function Section({children}) {
  const level = useContext(LevelContext)
  return (
    <section >
      <LevelContext.Provider value={level + 1}>
      {children}
      </LevelContext.Provider>
    </section>
  )
}

function Heading({children}) {
  const level = useContext(LevelContext)
  switch(level){
    case 1:
      return <h1>{children}</h1>
      case 2:
        return <h2>{children}</h2>
        case 3:
          return <h3>{children}</h3>
          case 4:
            return <h4>{children}</h4>
            case 5:
              return <h5>{children}</h5>
              case 6:
                return <h6>{children}</h6>
                default:
                  throw Error('未知的 level：'+level)
  }
}



export default function App() {
  return (
   <div>
     <Section>
        <Heading >主标题</Heading>
        <Section>
        <Heading >副标题</Heading>
        <Heading >副标题</Heading>
        <Heading >副标题</Heading>
        <Section>
        <Heading >子标题</Heading>
        <Heading >子标题</Heading>
        <Heading >子标题</Heading>
        <Section>
        <Heading >子子标题</Heading>
        <Heading >子子标题</Heading>
        <Heading >子子标题</Heading>
        </Section>
        </Section>
        </Section>
     </Section>
   </div>
  );
}

在这里插入图片描述

byyourself10
关注
专栏目录
react 函数组件中实现类似vue的slot功能，并用createContext、useContext来实现跨组件通信
九段刀客的博客
08-11 677
背景介绍(赶时间可以略过)：简单介绍一下我的使用场景，在react-native中用native-base和react-hook-form开发表单验证功能，跟web中不一样不能直接用 <input {...register("name")} />这种方式，需要套一层Controller，效果大概是这样的，这都只是我简写后的很多属性都没有放出来，而且这一套操作下来，只是一个字段，没办法了只能封装 <FormControl > <FormControl.Label>labe.
十八、react拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结
快乐de馒头
08-20 353
对象式的setState是函数式的setState的简写方式【语法糖】使用原则如果新状态不依赖于原状态【使用对象方式】如果新状态依赖于原状态 【使用函数方式】如果需要在setState()执行后，获取最新的状态数据，可以在第二个callback函数中读取到异步更新的最新值父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）
运用react插槽，自定义Madal插件
SHiny_Jun的博客
01-08 351
手摸手写一个Modal插件 首先封装一个组件modal,其中各个参数的作用在上面都进行了解析 主角组件 modal.js import { Fragment, Component } from 'react'; import c from './index.less'; /* * @visible {Boolean} 是否展示 * @closeName {String} 取消键...
react插槽实现
weixin_44818614的博客
06-23 885
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class ParentCom extends React.Component { constructor(props) { super(props) console.log(props); } render() { return ( <div>
【React知识点扫盲001】如何用React实现插槽
Super_hzj的博客
09-05 2236
插槽（slot）是一种用于在组件中插入内容的机制。它允许组件的使用者在组件的标记中插入自定义的内容，从而增强组件的灵活性和可重用性。React中插槽实现的核心就是要用调用组件。双闭合里传递的内容，都会作为变成放在组件参数props的children属性中！
重学React基础知识整理——组件间的另类通信“插槽”（五）
埃尔斯的博客
06-01 927
插槽、web组件中的插槽、vue中的插槽、react插槽，各种插槽的总结。
React组合（插槽）
过客如期的博客
08-05 6613
一，“具名插槽” 1.使用具体名字的props 传递一个 react元素，实现组件分发 function Demo(props){ return <div>props.content</div> } <Demo content={<span>demo</span>}> 二，props.children 1.使用props.children可任意分发组件内容 2.props.children的值有四种可能情况 (1) 当无内容时，为undef
React 组件通讯
m0_62118859的博客
04-26 2041
目录 1. 组件通讯-概念 1.组件的特点 2.知道组件通讯意义 总结： 2. 组件通讯-props 基本使用 1.传递数据和接收数据的过程 2.函数组件使用 props 3.类组件使用 props 总结： 3. 组件通讯-props 注意事项 1.知道什么是单向数据流？ 2.props 可以传递什么数据？任意 总结： 4. 组件通讯-父传子方式 1.父组件提供要传递的 state 数据 2.给子组件标签添加属性，值为 state 中的数据 3.子组件中通过 p...
【React系列】父子组件通信—props属性传值
川峰的博客
01-02 1400
AppMainAppHeaderHeaderHeaderMainBanner总之，在一个React项目中，组件之间的通信是非常重要的环节；props。
15.（vue3.x+vite）组件间通信方式之默认插槽（匿名插槽）.rar
09-20
在Vue.js框架中，组件间通信是开发过程中不可或缺的一部分，特别是在Vue 3.x与Vite结合使用时。Vue 3引入了许多改进，包括优化的性能和新的通信机制。本教程将详细探讨Vue 3.x中组件间通信的一种方法——默认插槽...
react插槽
weixin_51332774的博客
11-17 367
react插槽 组件中写入内容，这些内容可以被识别和控制。React 需要自己开发支持插槽功能。 原理: 组件中写入的HTML，可以传入到props中。 组件中的HTML内容直接全部插入 class ParentCom extends React.Component{//不写构造函数也默认有props render(){ console.log(this.props) return( <div> <h1>组件插槽</h1> {this.pr
【前端知识】React 基础巩固(二十)——组件插槽的三种实现方式
Outman's blog
07-09 1701
每个组件都可以获取到 props.children,其包含组件开始、结束标签之间的内容。相较于第一种，可以避免使用 children 下标，语义更强。
关于React的正确打开方式（四）插槽
专注在前端的路上人
04-09 649
React中的插槽 在React中对于插槽的实现，就是当我们在一个组件标签内去插入dom的时候，React会自动将被插入的这段dom挂载在组件的props的children上，然后只需要在子组件内部调用this.props.children，React就会自动将被插入的dom渲染在组件上，而且我们需要知道的是，react会将被插入的dom段作为一个Array类型的数据挂载在组件的props的children上。 父组件 import React, { Component } from 'react' i
react中插槽的实现方案
最新发布
qq_36406553的博客
06-29 394
react中有两种插槽的实现方案。
React插槽超清晰超简洁讲解
weixin_34392906的博客
11-17 444
<Window display={this.state.display}> //父组件在子组件中传入的三个div， <div papa="title">title</div> <div papa="content">content</div> <div papa="foot...
React应用篇：插槽（简单使用理解）
YanHSama的博客
04-09 696
Button组件 import './index.scss'; export default function Button(props) { const { type, } = props; console.log('Button', props); return ( <button >{props?.children}</button> ) } 父组件 <div className='note_
react——插槽
m0_55173487的博客
12-30 978
插槽的使用，需要在组件标签内部组合jsx内心，进行传递，因为jsx本身就是一个js对象，插槽直接使用隐藏属性children直接渲染到页面，也可以是数组或者对象，通过索引或者属性实现具名插槽。
(React入门)React中的插槽
linfeng_meng的博客
09-20 1902
在 vue 的使用中，我们时常会使用插槽来解决已经有架子的情况，将组件代码插入，那么在 react 中如何实现插槽呢?
vue与react区别
04-12
Vue和React都是目前非常流行的前端框架，但它们在设计理念、语法规范、组件化等方面还是有一些区别的。 首先，Vue更加注重模板化操作，在模板中可以直接使用Vue提供的指令，如v-if、v-for等，同时也支持通过插槽（slot）实现组件的复用。 React则采用JSX语法，将组件看做是一个函数，组件之间的通信通过props进行。 另外，Vue使用的是双向数据绑定，而React则采用了单项数据流的方式，使得React的数据流动更加明确和可控。 总之，两者各有优缺点，具体选择要看项目的具体需求和团队的技术背景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值