首页 > 其他分享 >React与Electron与ts一些组件配置与交互遇到的问题

React与Electron与ts一些组件配置与交互遇到的问题

时间:2024-08-05 21:17:41浏览次数:13  
标签:rightView return 布局 ts React Electron 组件 页面

React同vue一样都是组件化的,React更加的复杂多变,当我们需要改变页面中的内容时不仅仅要在直接关联的布局页面进行修改,步骤大致如下:在当前直接布局页面中增加布局组件函数,比如:

renderRightView() {//TODO RV++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    return (<div style={{ position: "relative" }}>
        <div>
          <button
            onClick={() =>
              this.setState(prevState => ({
                isBoxVisible: !prevState.isBoxVisible
              }))
            }>
            弹 出
          </button>
          <div
            style={{
              position: "absolute",
              top: 0,
              left: this.state.isBoxVisible ? -200 : 0, // 初始位置在左边边缘
              width: "200px",
              height: "100%",
              zIndex: 1000,
              backgroundColor: "lightblue",
              opacity: this.state.isBoxVisible ? 1 : 0, // 控制透明度
              transition: "left 0.3s ease-in-out, opacity 0.1s ease-in-out", // 添加平滑过渡效果
              boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
              pointerEvents: this.state.isBoxVisible ? "auto" : "none" // 当盒子透明时禁用点击事件
            }}>
            我是弹出的盒子
          </div>
        </div>
      </div>

    );
  }

 

,这个函数return返回一个页面之后,在当前组件页面的render返回的React元素中的
<AppLayout>中进行配置组件,定义组件名,并将组件函数作为组件名的属性,比如:
          rightView={this.renderRightView()}

这里的rightView需要在总布局文件中的render进行定义,定义之后,需要在return区域块进行布局,将所定义好的组件放到我们需要放到的位置上面,比如:

              <!-- 上文布局略-->
<div style={{width: 'auto', height: '100%',background:"red", top: '0px', left: '0px'}}>{/*右部导航栏整体最父级容器*/} <div>{/*子集导航栏*/} {rightView} </div> </div>
<!-- 下文布局略-->

这样页面内才会显示我们在直接关联的页面所增加的代码块内容,

标签:rightView,return,布局,ts,React,Electron,组件,页面
From: https://www.cnblogs.com/zjDm/p/18344066

相关文章

  • Jetson Orin nano 安装ubuntu22.04
    最近项目需要给底盘部署建图以及定位导航,底盘用的是Jetsonorinnano,用的是Ros2humble版本的机器人操作系统,由于humble版本的系统只支持ubuntu22.04,所以需要在orinnano上重新烧录ubuntu22.04,但是这个版本的系统跟之前的有些不一样,也踩了很多坑,查阅了官网的相关资料后,已经......
  • WPF locate discreted points via periodically and set transparency via the alpha,
    //xaml<Windowx:Class="WpfApp229.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mi......
  • AT_abl_e Replace Digits 题解
    题目传送门前置知识线段树解法需要维护区间信息,考虑使用线段树维护。预处理出\(\overline{xx\dotsx}\),其中\(x\in\{1,2,3,4,5,6,7,8,9\}\),便于区间赋值。然后就是普通的线段树板子了。代码#include<bits/stdc++.h>usingnamespacestd;#definelllonglong#de......
  • echarts 关系图(graph)里的links的起点和终点设置无效
    问题描述,data里面数据也设置了id({id:1})这样设置的,links里面设置了source和target({source:0,target:1}),但是运行发现只显示了node没显示连线(edge),去看了文档描述 1、source  stringnumber 边的源节点名称的字符串,也支持使用数字表示源节点的索引。2、target stringn......
  • 图表全能王(ChartStudio) 上架VisionPro!
    图表全能王(ChartStudio)-终极图表制作工具!支持条形图、折线图、面积图、柱形图、条形图、饼图、玫瑰图、雷达图、牛肉图、风琴图、旭日图、桑基图等图表。https://apps.apple.com/app/chartstudio-data-analysis/id6474099675https://apps.apple.com/cn/app/%E5%9B%BE%E8%A1%......
  • 使用react+node调用科大讯飞api实现实时语音听写(流式版)
    前言--踩坑过程一时间心血来潮,想用科大讯飞的api来做一个语音实时转文字,也是走了很多弯路,边写边查边生成,最后算是完成了。功能实现了但是没有做UI。本来想试试光靠不要服务端光靠前端直接调用科大讯飞的api来实现,但是发现太慢了,四五秒才蹦出来一个字。然后没办法,搭建了一个......
  • 3GPP RAN TSG#102闭幕及R19启动项目-5(NR 中的人工智能 (AI)/机器学习 (ML) 研究)
    Rel-19StudyonArtificialIntelligence(AI)/MachineLearning(ML)formobilityinNR-主体提案编号:RP-234055一、文档摘要(AI生成)工作项目描述:本文介绍了一个名为FS_NR_AIML_Mob的工作项目,目的是研究在NR中使用人工智能/机器学习(AI/ML)来提升移动性。研究内容:本文主要......
  • Echarts 实现圆角环形图
     第一种方式:使用bar实现想要的效果:代码实现:constchartData={title:{text:'97',//圆环中间数字textStyle:{color:'#222222',fontSize:20,},subtext:'成功数',subtextS......
  • Python,volcengine-python-sdk,安装失败,提示which is required to install pyproject.to
    问题描述:我是安装截止20240804发布的最新版本,volcengine-python-sdk-1.0.94.tar.gz报错一报错最后提示:whichisrequiredtoinstallpyproject.toml-basedprojects...note:Thiserrororiginatesfromasubprocess,andislikelynotaproblemwithpip.ERROR:Fai......
  • 视频笔记软件JumpVideo技术解析一:Electron案例-调用VLC播放器
              大家好,我是TheGodOfKing,是最强考研学习神器,免费视频笔记应用JumpVideo,可以快速添加截图时间戳,支持所有笔记软件,学习效率MAX!的开发者之一,分享技术的目的是想找到更多志同道合的人,如果有大学生加入,我们还允许他把项目作为毕设(只有一个名额哟)群(689978959),那么今......