MIT实习前置培训笔记5---React组件通信与插槽训练

于 2024-07-22 16:36:49 发布
阅读量790 收藏 7
点赞数 27
分类专栏： MIT前端实习笔记 文章标签： react.js 笔记 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64026421/article/details/140555033
版权

前言：React组件主要分为两种，一种是React Dom组件（react支持的所有html和svg标签），另一种是react组件。本节主要介绍组件间的通信与插槽操作。

一、React Dom组件

1.1 Dom 组件的类属性(className)

笔记4中并没有涉及到图片的使用，image其实是有其属性的，即className。

import logo from './logo.svg';
import image from './logo.svg';
import './App.css';
import{Fragment, useState} from "react"

function App(e) {

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

export default App;

1.2 Dom 组件的样式(style)

这里以设置一个简单长宽背景为例。

import logo from './logo.svg';
import image from './logo.svg';
import './App.css';
import{Fragment, useState} from "react"

function App(e) {

  return (
    <div>
      <img
        src={image}
        alt=""
        className='small'
        style={{
          width:200,
          height:200,
          background:'grey'
        }}
      />
    </div>
  )
}

export default App;

改变前：

改变后：

style里面直接套用这些，如果属性比较多，会感觉比较乱，所以可以用对象代替style。

import logo from './logo.svg';
import image from './logo.svg';
import './App.css';
import{Fragment, useState} from "react"

function App(e) {

  const imageStyleobj={
    width:200,
    height:200,
    background:'grey'
  }
  
  return (
    <div>
      <img
        src={image}
        alt=""
        className='small'
        style={imageStyleobj}
      />
    </div>
  )
}

export default App;

1.3 JSX的展开语法

可以看到上面那么写还是有点繁琐，写一个还行，如果写一堆就显得有些繁琐。可以利用JSX扩展语法写成如下形式（呈现效果和上面是一样的）：

import logo from './logo.svg';
import image from './logo.svg';
import './App.css';
import{Fragment, useState} from "react"

function App() {

  const imagData={
    className:'small',
    style:{
      width:200,
      height:200,
      background:'grey'
    }

  }

  return (
    <div>
      <img
        src={image}
        alt=""
        {...imagData}
      />
    </div>
  )
}

export default App;

二. React组件的props

2.1 Article组件的demo

类似于C++中写函数，App就类似C++中的主函数，在外部定义一个函数组件后，在App中直接返回就可以显示最终效果。

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

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

2.2 组件的传参（通信） 

这部分很简单，基本可以理解为C++中的函数传参，用法都是一样的，只是写法不太一样。具体用法如下：

function Article(props)
{
  return (
    <div>
    <h2>{props.title}</h2>
    <p>{props.content}</p>
    </div>
  )
}

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

      title="标签1"
      content="内容1"
    />
    <Article

      title="标签2"
      content="内容2"
    />
    <Article
    
      title="标签3"
      content="内容3"
    />
    </>
  )
}

ES6新的语法特性允许将props写成如下形式，也是可以的，和上面的效果是一样的：

function Article({title,content})
{
  return (
    <div>
    <h2>{title}</h2>
    <p>{content}</p>
    </div>
  )
}

2.3 active显示状态

加个active参数即可。

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

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

      title="标签1"
      content="内容1"
      acitve
    />
    <Article

      title="标签2"
      content="内容2"
    />
    <Article
    
      title="标签3"
      content="内容3"
      acitve
    />
    </>
  )
}

三、插槽

3.1 将父组件中的JSX作为props传递给子组件（以list为例简单的demo）

比如把App.js中的全部List作为children传到function List中去。

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>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
      </List>
    </>
  )
}

如果还需要添加title和footer可以这么做：

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

export default function App()
{
  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>
    </>
  )
}

3.2 将子组件的数值传递给父组件(以一个开关按钮为例)

父组件向子组件传参数都是只读的，子组件不能乱改。很多时候我们也希望父组件能从子组件中获得数据，如下为一个“开关按钮”实例：

import { useState } from "react"

function Detail()
{
  const [status,setStatus]=useState(false)
  function handleClick()
  {
    setStatus(!status)
  }

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

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

点击前的效果：

点击后的隐藏效果：

上面的代码父组件实际上是没有感知的，要想让父组件感知子组件的内容，可以按如下操作：

在父函数中写一个函数用onActive参数与子组件互动即可：

import { useState } from "react"

function Detail({onActive})
{
  const [status,setStatus]=useState(false)
  function handleClick()
  {
    setStatus(!status)
    onActive(status)
  }

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

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

可以看到我每次点击的时候，子组件的状态值传到父组件中，并调用了console.log（status）。

3.3 使用Context进行多级组件传值

例如我们要实现一个多级目录，如果一个一个定义标题级别会比较麻烦，例如下面这个写法：

import { useState } from "react"

export function Section({children}){

  return(
  <section className="section">
    {children}
  </section>
  )
}

export function Heading({ level, children }) {
  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 level={1}>主标题</Heading>
        <Section>
          <Heading level={2}>副标题1</Heading>
          <Heading level={2}>副标题2</Heading>
          <Heading level={2}>副标题3</Heading>
          <Section>
            <Heading level={3}>子标题1</Heading>
            <Heading level={3}>子标题2</Heading>
            <Heading level={3}>子标题3</Heading>
            <Section>
              <Heading level={4}>子子标题1</Heading>
              <Heading level={4}>子子标题2</Heading>
              <Heading level={4}>子子标题3</Heading>
            </Section>
          </Section>
        </Section>
      </Section>
    </div>
  );
}

效果：

用section去实现，每次都要手动去设置leve，这个很容易出错，且不方便。因此一种常用的做法是使用useContext组件来实现。这种方法使用 useContext 和 Context.Provider 来自动管理和递增标题的层级，从而避免了在组件树中手动传递层级的复杂性。：

import React, { createContext, useContext, useState } from "react";

const HeadingLevelContext = createContext(1);


const HeadingLevelProvider = ({ children }) => {
  const parentLevel = useContext(HeadingLevelContext);
  const level = parentLevel < 6 ? parentLevel + 1 : 6;

  return (
    <HeadingLevelContext.Provider value={level}>
      {children}
    </HeadingLevelContext.Provider>
  );
};


const Heading = ({ children }) => {
  const level = useContext(HeadingLevelContext);
  const Tag = `h${level}`;

  return <Tag>{children}</Tag>;
};


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

效果如下：

​​​​​​​

自此，“组件通信与插槽”的重要知识点简单训练就已经结束啦，下一节我将自学“React Hooks”的重要知识点使用，并呈现博客和具体实现的细节~~~

东湖山上
关注
  • 27
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用react-intl-universal进行组件和非组件的国际化
chenqk_123的专栏
11-01 5830
在做react项目时，用到了国际化。本想使用i8next等第三方国际化文件，但想了想作为react项目应该有自持的js作为国际化的支持。于是在github上搜索了一下，发现了两个: 一个是react-intl，从星级可以看出是react最常用的一种国际化，最大的好处是它用props的方式注入语言包，也就是可以在不刷新页面的情况下直接更改显示的语言。 但是只支持React.Component...
React-Native之WebView组件 - Native与Web的通信和交互
举世武双的博客
12-13 3479
文档地址：https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native WebView组件是RN端与Web端交互的一个常用组件。 原本WebView组件是放在react-native组件库当中的，现在R...
react-slots
03-18
React Slots-您一直在等待的那个 这是一组组件，它们提供用于响应HTML5 <slot>行为的相似且熟悉的实现。请注意，这并不在幕后使用真实的插槽，而是为开发人员提供了相同的表达体验。 查看！ npm install react-slots yarn add react-slots 用法 像正常使用<slot>元素一样使用Slot组件。 将您的组件传递给SlotHost函数（HOC）。 import React from "react" ; import { SlotHost , Slot } from "react-slots" ; const PageLayout = ( props ) => { return ( < div xss=removed> < header>
react插槽实现
weixin_44818614的博客
06-23 864
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插槽
qq_40816649的博客
12-13 540
vue的插槽需要在组件中定义slot标签，并且在引用的时候要对应slot标签上的插槽名。 react的插槽直接将dom写到组件的标签下然后子组件通过this.props.children获取到放入的dom元素，这个dom元素可以设置key属性来区分每一个元素。然后在组件中直接将dom当成组件引入到render中。 对比vue和react的插槽都是实现了相同的功能但是vue的实现方式更加直观一...
react native 学习笔记----封装Android的原生组件
wxq888的专栏
09-29 2812
参考文档官方版：Native UI Components 中文版：原生UI组件 上面的文档介绍了facebook 开发小组，如何封装原生组件ImageView给js调用，但是没有具体的实例，按照上面的文档弄了半天
react native截屏组件 react-native-view-shot总结
weixin_45077505的博客
12-03 6368
截图组件react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取（）
react-wechat:使用react构建微信应用的框架
05-15
React-Wechat 使用 React 进行书写小程序，尽最大努力贴近 React 语法 TODOLIST 页面 App 组件化 tag属性的支持 component 组件children 抽象组件 组件关系 behaviors mapv函数中设置 style 的bug 无状态...
nano-slots:React的超轻量级插槽实现
05-22
纳米槽 一种超轻量级的现代替代方案， 通过熟悉的API 。 使用Slot and Fill控制子组件渲染 在多个位置渲染子组件的内容 快速- Fill和Slot直接相互通信 经过 用TypeScript编写 零依赖 仅〜431 B :package: 安装 npm i -S nano-slots yarn add nano-slots :laptop: 用法 创建一个组件并定义插槽 import { Box , Flex } from 'theme-ui' import { SlotsProvider , Slot } from 'nano-slots' export const MediaObject = ( { children } ) => ( < SlotsProvider> < Flex> < Box xss=removed> < Slot n
React插槽
qq_44718039的博客
11-18 728
关于React中的插槽（具名插槽和匿名插槽）
React——插槽
hd101367816的博客
10-04 98
React也有类似于Vue一样的slot功能。 父组件中: ...somecode render(){ return( <ChildComponent> <p>我是插槽1</p> <p>我是插槽2</p> </ChildComponent> ) } 子组件中在props中的children属性中拿到父组件戳过来的ReactElement。 子组件： ...somecode render()
react中的插槽
最新发布
m0_47999208的博客
02-18 255
【代码】react中的插槽。
React中的插槽
你华还是你华
03-09 1043
本文目录一、react插槽1.1 代码演示1.2 插槽好处 一、react插槽 1.1 代码演示 使用this.props.children。 新建children.js组件，写入： import React, { Component } from 'react' class Child extends Component { render() { return ( <div> children
(React入门)React中的插槽
linfeng_meng的博客
09-20 1856
在 vue 的使用中，我们时常会使用插槽来解决已经有架子的情况，将组件代码插入，那么在 react 中如何实现插槽呢?
React组合（插槽）
过客如期的博客
08-05 6585
一，“具名插槽” 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基础：create-react-app入门与核心组件
- **react-dom**：专门针对Web浏览器的版本，它是React与DOM交互的桥梁，实现了React组件在浏览器环境中的渲染。 - **react-scripts**：包含开发服务器、构建工具和测试运行器等，简化了项目的初始化和日常开发流程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值