函数是组件 -- 缩略图

慕仲卿2023-10-11 16:47

故事背景

在日常前端开发的过程中，我不止一次的遇到过主视图-缩略图功能的实现。现封装一个组件，将其渲染到不同的位置上去，实现主视图和缩略图的功能，同时提供了接口，保留了一定的定制化功能。

设计思路

    1. 使用React.createElement创建带参数的React.FunctionComponentElement<any>对象;
    1. 使用React.createPortal产生两个包裹目标组件的待渲染组件M；
    1. 使用函数式组件MA将两个M包裹在一起，方便管理，MA的兼具处理数据流的作用；
    1. 在合适的地方使用MA，将组件渲染到不同的容器中去，并保留一定的定制接口。

0. 项目结构搭建

bash 复制代码 
npx create-react-app test-MA --template=typescript
rm -rf src/*
cd src/
touch app.tsx index.css index.tsx logo.svg MA.tsx

1. 包装组件MA的接口

ts 复制代码 
type IProps = {
  main: string;
  auxiliary: string;
  content: (props: any)=> JSX.Element;
  mainStyle: Record<string, string|number>;
  auxiliaryStyle: Record<string, string|number>;
}

2. 待渲染组件M的接口

ts 复制代码 
type IMProps = {
  id: string;
  content: (props: any)=> JSX.Element;
  style: Record<string, string|number>;
}

3. 待渲染组件M

ts 复制代码 
const M = (props: IMProps) => {
  const {id, content:C, style} = props;
  const target = document.getElementById(id);
  
  if(target) {
    return ReactDOM.createPortal(
      React.createElement(C, {style}), // 这样做的目的是为了在渲染content组件的时候传递参数
      target,
    );
  } else {
    return <></>;
  }
}

4. 包装组件MA

ts 复制代码 
function MA(props: IProps) {
  const {main: m, auxiliary: a, content:c, mainStyle: mS, auxiliaryStyle: aS} = props;
  
  return (
    <>
      <M id={m} content={c} style={mS} />
      <M id={a} content={c} style={aS} />
    </>
  );
}

5. 容器构造以及MA的使用

ts 复制代码 
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <>
    <div
      id='main-view'
    ></div>
    <div
      id='auxiliary-view'
    ></div>
    <MA
      main='main-view'
      auxiliary='auxiliary-view'
      content={App}
      mainStyle={{color:'red'}}
      auxiliaryStyle={{color:'blue'}}
    />
    
  </>
);

6. 主视图和缩略图的样式

css 复制代码 
#main-view {
  position: absolute;
  overflow: hidden;
  width: 500px;
  height: 500px;
  top: 100px;
  left: 100px;
}

#auxiliary-view {
  position: absolute;
  overflow: hidden;
  width: 100px;
  height: 100px;
  bottom: 100px;
  right: 100px;
}

7. 被渲染的组件App

ts 复制代码 
import React from 'react';
import logo from './logo.svg';

type IProps = {
  style: Record<string, string | number>;
}

function App(props: IProps) {
  const { style:{color='black'} } = props;
  return (
        <img style={{width: '100%', border: `1px solid ${color}`}} src={logo} alt="logo" />
  );
}

export default App;

8. 各个文件内容

app.tsx

tsx 复制代码 
import React from 'react';
import logo from './logo.svg';

type IProps = {
  style: Record<string, string | number>;
}

function App(props: IProps) {
  const { style:{color='black'} } = props;
  return (
        <img style={{width: '100%', border: `1px solid ${color}`}} src={logo} alt="logo" />
  );
}

export default App;

index.css

css 复制代码 
#main-view {
  position: absolute;
  overflow: hidden;
  width: 500px;
  height: 500px;
  top: 100px;
  left: 100px;
}

#auxiliary-view {
  position: absolute;
  overflow: hidden;
  width: 100px;
  height: 100px;
  bottom: 100px;
  right: 100px;
}

index.tsx

tsx 复制代码 
/// <reference types="react-scripts" />
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import MA from './MA';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <>
    <div
      id='main-view'
    ></div>
    <div
      id='auxiliary-view'
    ></div>
    <MA
      main='main-view'
      auxiliary='auxiliary-view'
      content={App}
      mainStyle={{color:'red'}}
      auxiliaryStyle={{color:'blue'}}
    />
  </>
);

logo.svg

xml 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

MA.tsx

tsx 复制代码 
import React from 'react';
import ReactDOM from 'react-dom';

type IProps = {
  main: string;
  auxiliary: string;
  content: (props: any)=> JSX.Element;
  mainStyle: Record<string, string|number>;
  auxiliaryStyle: Record<string, string|number>;
}


type IMProps = {
  id: string;
  content: (props: any)=> JSX.Element;
  style: Record<string, string|number>;
}

const M = (props: IMProps) => {
  const {id, content:C, style} = props;
  const target = document.getElementById(id);
  
  if(target) {
    return ReactDOM.createPortal(
      React.createElement(C, {style}),
      target,
    );
  } else {
    return <></>;
  }

}

function MA(props: IProps) {
  const {main: m, auxiliary: a, content:c, mainStyle: mS, auxiliaryStyle: aS} = props;
   
  return (
    <>
      <M id={m} content={c} style={mS} />
      <M id={a} content={c} style={aS} />
    </>
  );
}

export default MA;
相关推荐
爱喝奶茶的企鹅2 小时前
Next.js 14 性能优化：从首屏加载到运行时优化的最佳实践
react.js
政采云技术3 小时前
React前端权限管理思路
前端·react.js
傻小胖3 小时前
React 脚手架使用指南
前端·react.js·前端框架
若川4 小时前
Taro 源码揭秘：10. Taro 到底是怎样转换成小程序文件的？
前端·javascript·react.js
真的很上进14 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？
java·前端·javascript·css·react.js·vue·html
wakangda1 天前
React Native 集成原生Android功能
javascript·react native·react.js
秃头女孩y1 天前
【React中最优雅的异步请求】
javascript·vue.js·react.js
前端小小王2 天前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 天前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
不是鱼2 天前
构建React基础及理解与Vue的区别
前端·vue.js·react.js
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）