天道酬勤,学无止境

Storing component into a variable and reuse it

Ok i got components imported as

import Payment from './pages/payment';
import Chat from './pages/chat';

Now I am using Drawer component and using it together with Navigator my renderScene become something like this

if( route.id == 'payment'){
    return  <Drawer  xx={} yy={} and a lot more >
              <Payment navigator={navigator} />
            </Drawer>
}

if(route.id == 'chat'){
    return <Drawer  xx={} yy={} and a lot more >
              <Chat navigator={navigator} />
            </Drawer>
}

Those lengthy Drawer code are being used again and again. I want to store that <Payment navigator={navigator} > or the other into a variable and then return that with Drawer only once.

How can i store it and return it with Drawer?

Thanks

评论

Not sure if you are asking this but what about something like:

const routes = {
 payment: Payment,
 chat: Chat
 ...
}

And then, just:

const Scene = routes[route.id];
return (
  <Drawer>
    <Scene navigator={navigator}/>
  </Drawer>
)

Here you have 3 options:

// 1. Group the drawer props in an object
const drawerProps = {
  xx: ...,
  yy: ...
};
<Drawer {...drawerProps}>
  <Chat navigator={navigator} />    
</Drawer>

// 2. Define a wrapper object that populates the common Drawer props
const CustomDrawer = ({ children }) => (
  <Drawer  xx={} yy={} and a lot more>
    {children}
  </Drawer>
);


// 3. Define a wrapper object that populates the common Drawer props with default props. (Can be 
// overriden.)
const CustomDrawer = ({ 
  xx='XX',
  yy='YY',
  children 
}) => (
  <Drawer  xx={xx} yy={yy} and a lot more>
    {children}
  </Drawer>
);

EDIT: I missunderstood your question, for storing the inner part you just have to assign it to a varible and use it.

const routes = {
  chat: <Chat navigator={navigator} />,
  payment: <Payment navigator={navigator} />,  
}


<Drawer {...drawerProps}>
  { routes[route.id] }
</Drawer>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在 C 中重用释放的指针(Reusing freed pointers in C)
    问题 这个网站上有很多关于在使用后释放指针以及将它们设置为 NULL 的问题。 争论激烈,话题似乎平分秋色。 例如:这个问题。 我对释放指针感到困惑。 想象一下,您有一个指向某个内存空间的指针。 使用空间后,释放指针但不将其设置为 NULL。 稍后,您有另一个调用malloc()或一些类似物的指针,它被分配了内存,包括之前释放的内存(原始指针仍然指向)。 如果这个新指针写入这个内存块,会发生什么? 直觉上不会发生任何事情,但是之前提供的链接中的 OP 写道它会使程序崩溃。 所以我的问题是: 给定一个已释放的指针,是什么阻止您将该指针重新分配给新的内存位置? 为什么重用释放的指针是“不好的”做法? 如果调用free(ptr)只将这块内存返回给操作系统,为什么不能重新分配指针以便其他内存位置并重用它? char *ptr = malloc(sizeof(*ptr)); //first allocation free(ptr); //release memory ptr = NULL; ptr = malloc(sizeof(*ptr)); //reallocate 为什么写入先前释放的内存块,仍然具有原始指针,导致程序崩溃? - 请参阅上面链接的问题的第一篇文章的第一段(如果我误解了本段的意图,请解释一下,因为该指针是再次用于写入内存还是创建新指针尚不明确。) 回答1
  • 警告:由于性能原因,此合成事件被重用(Warning: This synthetic event is reused for performance reasons happening with <input type=“checkbox” />)
    问题 我一直在为一个类开发一个简单的 react-redux todo 示例,每次我检查和取消选中复选框输入时,我都会在控制台中看到几条警告消息。 您可以在下图中看到警告。 我还对警告消息进行了谷歌搜索,但找不到任何有效的解决方案。 此外,让我注意到的是,它似乎试图访问本机事件和 DOM 元素的每个属性。 这是具有输入复选框的表示组件的代码 class TodoItem extends React.Component { state = { isChecked: false }; handleCheckbox = () => { this.setState({ isChecked: !this.state.isChecked }); }; render() { const { todos, onItemClick } = this.props; const { isChecked } = this.state; return ( <div> <ul> {todos.map((todo, id) => { return ( <li key={id} onClick={onItemClick}> <input onChange={this.handleCheckbox} type="checkbox" checked={isChecked} /> <label> <span />
  • 为什么我不应该在JNI中重用jclass和/或jmethodID?(Why I should not reuse a jclass and/or jmethodID in JNI?)
    问题 这是与以前的帖子有关的问题,但此帖子已解决,现在我想更改问题的方向。 使用JNI时,有必要向JNIEnv对象询问要在C / C ++代码中使用的每个类和方法的jclass和jmethodID 。 为了清楚起见,我想从C / C ++调用Java构造函数或方法。 由于从Java到C / C ++的通信成本jclass (反之亦然),因此我最初认为使这种情况最小化的一种方法是重用jclass和jmethodID 。 因此,我将该实例保存在全局变量中,如下所示: jclass someClass = NULL; jmethodID someMethod = NULL; JNIEXPORT jobject JNICALL Java_example_method1(JNIEnv *env, jobject jobj) { // initialize someClass and someMethod if they are NULL // use someClass and someMethod to call java (for example, thru NewObject) } JNIEXPORT jobject JNICALL Java_example_method2(JNIEnv *env, jobject jobj) { // initialize someClass and
  • ASP.NET 会话和存储使用 COM 互操作的对象(ASP.NET session and storing objects that use COM interop)
    问题 我在一个asp.net 网站上工作。 我们必须使用 com interop 与旧版 vb6 activex 组件进行交互。 在许多情况下,组件依赖于接收上下文对象(它本身是一个 vb6 activex 组件)作为参数。 上下文对象的构建成本相当高。 因此,一种想法是将上下文对象构造一次并存储在 asp.net 会话中。 但是,如果这个对象只是一个 activex 组件的 .net 包装器,那么在会话中持久化这样一个对象是否明智或可取? 此外,上下文对象包含用户特定的信息,因此可以使用 .net HttpRuntime 缓存进行持久化,但需要用户特定的密钥。 我了解使用 asp.net session、aspnet-session 问题需要注意的其他限制和事项。 以稍微不同的方式提出这个问题:他们在存储 .net 对象(只是 com 对象的包装器)方面有任何问题吗? 回答1 我认为您会很快遇到一个请求阻塞另一个请求的问题。 默认情况下,ASP.NET 在其线程上初始化 COM 以将线程置于多线程单元中。 VB6 组件充其量是公寓模型。 这意味着当 MTA 线程创建组件时,如果一个组件已经存在(对于 ASP.NET 工作进程,它不会)或专门为 STA 创建一个新线程,它就会被放入主 STA。 哪个 MTA 线程创建组件无关紧要,相同的 STA 始终用于无法处理 MTA 模型的组件
  • Storing an object in state of a React component?
    Is it possible to store an object in the state of a React component? If yes, then how can we change the value of a key in that object using setState? I think it's not syntactically allowed to write something like: this.setState({ abc.xyz: 'new value' }); On similar lines, I've another question: Is it okay to have a set of variables in a React component such that they can be used in any method of the component, instead of storing them in a state? You may create a simple object that holds all these variables and place it at the component level, just like how you would declare any methods on the
  • 在React组件的状态下存储对象?(Storing an object in state of a React component?)
    问题 是否可以在React组件的状态下存储对象? 如果是,那么我们如何使用setState更改该对象中键的值? 我认为在语法上不允许这样写: this.setState({ abc.xyz: 'new value' }); 类似地,我还有一个问题:在React组件中可以有一组变量,以便可以在组件的任何方法中使用它们,而不是将它们存储在状态中,这还可以吗? 您可以创建一个包含所有这些变量的简单对象,并将其放在组件级别,就像在组件上声明任何方法一样。 很有可能会遇到这样的情况,其中您在代码中包含了很多业务逻辑,并且需要使用许多变量,这些变量的值可以通过几种方法更改,然后您可以根据这些值更改组件的状态。 因此,您不必保留所有这些变量处于状态,而是仅保留其值应直接反映在UI中的那些变量。 如果这种方法比我在这里写的第一个问题更好,那么我就不需要在状态中存储对象。 回答1 除了kiran的帖子外,还有更新助手(以前是react addon)。 可以使用npm install immutability-helper与npm install immutability-helper import update from 'immutability-helper'; var abc = update(this.state.abc, { xyz: {$set: 'foo'} }); this
  • 前端UI Angular框架笔记(二):Angular框架概念介绍
    适用于angular 2.0 及以上版本 一、基本概念1、什么是NgModule(模块)2、什么是component(组件)3、什么是service(服务)4、什么是dependency injection(依赖注入) 二、结构型指令1、*ngIf 判断指令2、*ngFor 循环指令 三、数据展示1、{{}} 双大括号绑定到html页面2、[ ] 绑定DOM属性3、( ) 事件绑定4、[(ngModel)] 双向绑定 前言 :在上一篇文章里面我们体验了创建一个空白Angular框架,但是要想真正入门Angular,概念知识是必不可少,今天一起学习,共勉。 一、基本概念 以下讲解部分摘抄至官网 1、什么是NgModule(模块) ① 官方解释: Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件,其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能,并导出一些指定的功能供其它 NgModule 使用。 ② 个人理解: 我们可以在NgModule在这个容器内存放组件、插件等以供全局使用。 2、什么是component(组件) ①
  • Storing a Bitmap resource in a static variable
    I have a view which displays a small bitmap, and this is used in many places in my application (especially list views). I'm currently loading this bitmap each time an instance of that view is created using BitmapFactory.decodeResource(resource, id). I realized that I can improve performance by loading that bitmap once into a static variable (so that all instances of the view reuse it) and that did indeed save about 2-4 ms per view instance. My question, does using a static variable in this way cause any type of memory leak in Android? I'm worried because I haven't found any other example that
  • 软件构造5.1
    第5章:面向可重用性的软件构建方法5.1可重用性的度量,形态和外部观察 5.1可重用性的度量,形态和外部观察 大纲 什么是软件重用? 如何衡量“可重用性”? 可重用组件的级别和形态 - 源代码级别重用 - 模块级重用:类/接口 - 库级:API /包 - 系统级重用:框架可重用性的外部观察 - 类型变化 - 例程分组 - 实现变化 - 代表独立 - 考虑共同行为摘要 5.1可重用性的度量,形态和外部观察本讲座的目标 讨论软件重用的优缺点描述构造以便重用讨论通用可重用组件的特性描述开发便携式应用系统的方法 软件构建 1什么是软件重用? 5.1可重用性的度量,形态和外部观察 软件重用 软件重用是使用现有软件组件实现或更新软件系统的过程。 软件重用的两个视角 - 创建:以系统方式创建可重用资源(重用编程) - 使用:将资源重新用作创建新系统的构建块(重用编程)为什么要重用? - “创造可重复使用而非暂时性文物的动力具有审美,智力和经济动机,是人类对永生的渴望的一部分。它将人与其他生物区别开来,文明与原始社会区别开来“(Wegner,1989)。 5.1可重用性的度量,形态和外部观察 为何重用? 重复使用具有成本效益和及时性 - 通过缩短软件生产周期时间(软件开发速度更快,人员更少)提高软件生产率 - 不会浪费资源来不必要地“重新发明轮子” - 降低维护成本
  • Jquery - 我不应该重复选择器(存储在变量中)吗?(Jquery - Should I not repeat selectors (store in a variable)?)
    问题 有时我发现自己多次重复选择器。 我应该以某种方式将一个 jquery 对象存储到一个变量中,然后只使用那个吗? 举个简单的例子,下面的呢?: $('a.contactus').css('padding', '10px'); $('a.contactus').css('margin', '4px'); $('a.contactus').css('display', 'block'); 现在我知道这不是一个很好的例子,因为你可以有效地链接每个 css 函数。 但是假设在每一个之间有一个条件语句或阻止你链接的东西。 我可以将 jquery 对象存储在变量中吗? 如果是这样,我什么时候应该/可以? 回答1 你可以这样做 var myvar = $('a.contactus'); myvar.css('padding', '10px').css('margin', '4px').css('display', 'block'); 但为了可读性,我这样做 var myvar = $('a.contactus'); myvar.css('padding', '10px') .css('margin', '4px') .css('display', 'block'); 基本上每次使用 $(someselector) 时都会遍历 dom。 如果可以,您应该存储元素引用。 回答2 当多次重用它
  • 使用带有样式组件的 Javascript 变量(Using Javascript Variables with styled-components)
    问题 我正在使用样式组件来构建我的组件。 所有接受自定义值的样式属性都在我的组件中重用(应该如此)。 考虑到这一点,我想使用某种全局变量,以便更新将传播到所有组件,而无需单独更新每个样式。 像这样的东西: // Variables.js var fontSizeMedium = 16px; // Section.js const Section = styled.section` font-size: ${fontSizeMedium}; `; // Button.js const Button = styled.button` font-size: ${fontSizeMedium}; `; // Label.js const Label = styled.span` font-size: ${fontSizeMedium}; `; 我想我的语法错了? 另外,我知道在 Javascript 领域不推荐使用全局变量,但在设计领域,跨组件重用样式是绝对必须的。 这里有什么权衡? 回答1 在您的应用程序周围包裹一个<ThemeProvider>可能会有所帮助: https://www.styled-components.com/docs/advanced#theming const theme = { fontColour: 'purple' } render() { return (
  • 1.2 JavaScript初体验
    1、引入JavaScript JavaScript 和 CSS 类似,要嵌入到 HTML 中才能被浏览器解释和执行,将 JavaScript脚本嵌入到 HTML 文档中有 3 种标准引入方法: (1)行内引入:在 HTML 属性中直接嵌入,结构行为不分离,不方便复用,不建议使用; <div style = "width:100px;height:100px;background:red;" onclick="alert('我是平头哥')">我是来学前端的</div> 优缺点: ··········在标签内部使用 js 代码,结构不分离,无法重用,不利于后期维护,不建议使用。 (2)内嵌引入:JavaScript 代码可以通过 script 标签嵌入到 HTML 文档内部,写在 script 标签之间。 <script> alert('我是超人,来拯救世界'); </script> ·····缺点:结构不分离 ·····需要注意的是,一个 HTML 文档中可以出现任意多个 script 标签,也可以放在任何地方,一般 script 标签放置在 head 头部标签中,或者是 body 标签的末尾,建议放在 body 标签的末尾。 (3)外链:通过 script 标签的 src 属性外链 js 文件(引入外部脚本) <script scr="js/a.js"></script> ····
  • [软件工程] 面向对象设计
    面向对象设计 面向对象设计一、 面向对象设计的准则(一) 模块化(二) 抽象(三) 信息隐藏(四) 弱耦合对象之间的耦合可分为两大类:(1) 交互耦合(2) 继承耦合 (五)强内聚(六)可重用 二、启发规则(一) 设计结果应该清晰易懂1.用词一致2.使用已有的协议3.减少消息模式的数目有标准的消息协议,应该遵守这些协议。4.避免模糊的定义 (二) 一般-特殊结构的深度应适当应该使类等级中包含的层次数适当。(三)设计简单的类1.避免包含过多的属性2. 有明确的定义3. 尽量简化对象之间的合作关系4.不要提供太多服务一个类提供的公共服务不超过7个。 三、软件重用(一) 概述1. 重用2.3个级别:(1) 代码重用(2) 设计结果重用(3) 分析结果重用 3. 典型的可重用软件成分 (二) 类构件1. 可重用软构件应具备的特点(1) 模块独立性强(2) 具有高度可塑性(3)接口清晰、简明、可靠 2. 类构件的重用方式(1) 实例重用(2) 继承重用(3) 多态重用 (三) 软件重用的效益1. 质量2. 生产率3. 成本 四、 系统分解(一) 子系统之间的两种交互方式1. 客户-供应商关系2. 平等伙伴关系 (二)组织系统的两种方案1.层次组织2. 块状组织 (三)设计系统的拓扑结构 五、 设计问题域子系统(一)调整需求两种情况修改(二)重用已有的类(三) 把问题域类组合在一起设计中
  • 将查询结果存储在变量中(Storing query result in a variable)
    问题 我有一个查询,我想将其结果存储在一个变量中,我该怎么做? 我试过 ./hive -e "use telecom;insert overwrite local directory '/tmp/result' select avg(a) from abc;" ./hive --hiveconf MY_VAR =`cat /tmp/result/000000_0`; 我能够在 MY_VAR 中获得平均值,但它需要我进入 hive CLI,这不是必需的,有没有办法在 hive CLI 中访问 unix 命令? 回答1 用例:在 mysql 中以下是有效的: set @max_date := select max(date) from some_table; select * from some_other_table where date > @max_date; 这对于需要重复调​​用此变量的脚本非常有用,因为您只需要执行一次最大日期查询,而不是每次调用该变量时。 HIVE 目前不支持这一点。 (如果我错了,请纠正我!我整个下午都在试图弄清楚如何做到这一点) 我的解决方法是将所需的变量存储在一个足够小的表中,以便将 join 映射到使用它的查询上。 因为连接是映射而不是广播连接,所以它不会显着影响性能。 例如: 如果存在 var_table 则删除表; 创建表 var_table
  • 13种常见软件体系结构风格定义分析、结构图、优缺点
    一、概述 软件体系结构表示系统的框架结构,用于从较高的层次上来描述各部分之间的关系和接口,主要包括构件、构件性质和构件之间的关系。 通过使用软件体系结构,可以有效地分析用户需求,方便系统的修改,以及减小程序构造风险。 随着软件规模不断地增大和复杂程度日益增高,系统框架架构的设计变得越来越关键。软件框架设计的核心问题是能否复用已经成型的体系结构方案。由此,产生了软件体系结构风格的概念。 二、常见风格分类 体系结构风格的形成是多年探索研究和工程实践的结果。一个良好和通用的体系结构风格往往是工程技术领域成熟的标志。经过多年的发展,已经总结出许多成熟的软件体系结构风格,例如: 数据流风格:批处理和管道/过滤器。调用/返回风格:主程序/子程序、层次结构和C/S。面向对象风格。独立部件风格:进程通信和事件驱动。虚拟机风格:解释器和基于规则的系统。数据共享风格:数据库系统和黑板系统。 三、 体系结构风格 1.管道/过滤器 体系结构风格 惯用模式: 主要包括过滤器和管道两种元素。在这种结构中,构件被称为过滤器,负责对数据进行加工处理。每个过滤器都有一组输入端口和输出端口,从输入端口接收数据,经过内部加工处理之后,传送到输出端口上。数据通过相邻过滤器之间的连接件进行传输,连接件可以看作输入数据流和输出数据流之间的通路,这就是管道。 原理图: 优点: 简单性。支持复用。系统具有可扩展性和可进化型
  • 13种常见软件体系结构风格定义分析、结构图、优缺点
    一、概述 软件体系结构表示系统的框架结构,用于从较高的层次上来描述各部分之间的关系和接口,主要包括构件、构件性质和构件之间的关系。 通过使用软件体系结构,可以有效地分析用户需求,方便系统的修改,以及减小程序构造风险。 随着软件规模不断地增大和复杂程度日益增高,系统框架架构的设计变得越来越关键。软件框架设计的核心问题是能否复用已经成型的体系结构方案。由此,产生了软件体系结构风格的概念。 二、常见风格分类 体系结构风格的形成是多年探索研究和工程实践的结果。一个良好和通用的体系结构风格往往是工程技术领域成熟的标志。经过多年的发展,已经总结出许多成熟的软件体系结构风格,例如: 数据流风格:批处理和管道/过滤器。调用/返回风格:主程序/子程序、层次结构和C/S。面向对象风格。独立部件风格:进程通信和事件驱动。虚拟机风格:解释器和基于规则的系统。数据共享风格:数据库系统和黑板系统。 三、 体系结构风格 1.管道/过滤器 体系结构风格 惯用模式: 主要包括过滤器和管道两种元素。在这种结构中,构件被称为过滤器,负责对数据进行加工处理。每个过滤器都有一组输入端口和输出端口,从输入端口接收数据,经过内部加工处理之后,传送到输出端口上。数据通过相邻过滤器之间的连接件进行传输,连接件可以看作输入数据流和输出数据流之间的通路,这就是管道。 原理图: 优点: 简单性。支持复用。系统具有可扩展性和可进化型
  • 在功能组件中存储非状态变量(Storing non-state variables in functional components)
    问题 下面是两个几乎做同样事情的 React 组件。 一个是函数; 另一个是一个类。 每个 Component 都有一个Animated.Value和一个异步侦听器,在更改时更新_foo 。 我需要能够访问功能组件中的_foo ,就像我在经典组件中使用this._foo一样。 FunctionalBar不应在全局范围内包含_foo以防有多个FunctionalBar 。 FunctionalBar不能在函数作用域中包含_foo ,因为每次FunctionalBar呈现时都会重新初始化_foo 。 _foo也不应该处于 state 中,因为当_foo更改时组件不需要渲染。 ClassBar因为它一直没有这个问题_foo初始化在this整个组件的整个生命周期。 如何在FunctionalBar整个生命周期中保持_foo初始化而不将其放入全局范围? 功能实现 import React from 'react'; import { Animated, View } from 'react-native'; var _foo = 0; function FunctionalBar(props) { const foo = new Animated.Value(0); _onChangeFoo({ value }) { _foo = value; } function showFoo() {
  • 相对路径中的Angular 2 img src(Angular 2 img src in a relative path)
    问题 johnpapa Angular 2样式指南建议采用逐个文件夹的方法。 我的想法是,您可以使自包含的小角度组件可以重复使用。 因此,我做了一个要在另一个项目中重用的组件,并将其放在自己的文件夹中。 我还添加了一个我希望该组件显示在同一文件夹中的图像,因此它们全部包含在内。 <img class="logo" src="logo.png"/> 但这会尝试从根localhost:3000/logo.png加载图像。 我想这意味着我必须实际使用图像的确切路径,但是这是否破坏了其他人可以在其他项目中重用的组件的整体思想? 有什么建议吗? 编辑以澄清我正在使用Angular 2快速入门中的文件夹结构,这意味着我的根文件夹为: app/ node_modules/ index.html package.json tsconfig.json 因此,即使我使用路径header / logo.png,它也不起作用。 我必须做app / header / logo.png。 这实际上是一条绝对路径,并且如果我添加一个斜杠“ /app/header/logo.png”,实际上也同样有效。 小于完整路径的任何内容都会断开链接。 这意味着如果有人想重复使用此文件夹,则他们必须具有完全相同的文件夹结构。 我想这只是它的工作方式,我只是学习Angular 2,但在我看来
  • 2021-04-07
    2021-03-07 4.1.1 JavaBean 概述 JavaBean 是使用 Java 编写的组件,每一个 JavaBean 均实现一个特定的功能。 JavaBean 通过对属性和方法的封装,成为具有独立功能、可重复使用并且可与其他控件通信的组件对象,具有以下优点 重用性强 模块化 可维护性、扩展性强 4.1.2 JavaBean的重要性 在一个复杂的Web应用中把特定的功能封装成JavaBean能有效提高代码重用性和后期维护性 JavaBean 通过封装一些具体的动作来实现一个特定的功能,即对外提供最小限度的属性接口,供用户操作和控制,但用户不知道它内部的具体运行机制,从而提高了安全性 4.1.3 JavaBean的特点 通常JavaBean都具有如下几个特点: 提供一个public无参构造方法,以方便创建对象和赋予初值 public class People { private String name; // 定义姓名 private String sex; // 定义性别 public People(){ name=“jack”; // 为特性的属性设置默认值 sex=“M”; } // 此处省略 getter() 方法和 setter() 方法 } 通常情况JavaBean组件需要实现 java.io.Serializable 序列化接口
  • css预处理器
    为什么会出现css预处理器 –CSS不是一种编程语言,仅仅只能用来编写网站样式,在web初期时,网站的搭建还比较基础,所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级,css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量,常量以及其他的编程语法,css的代码难免会显得臃肿以及难以维护。但是又没有css的替代品,于是css预处理器就作为css的扩展,出现在了前端技术中。 2.常见的css预处理器 –发展至今,CSS预处理器的技术已经相当成熟,也涌现出了很多中不同的CSS预处理器语言。目前主流的有三种:Sass(Scss), Less, Stylus。 3.CSS预处理器的方便之处 –以Sass为例 –Sass主要的功能有:允许定义变量,允许CSS代码嵌套,函数功能,Mixin,继承等。 这些功能使得编写CSS更加贴合编程语言的习惯,使得CSS代码复用性更高,代码功能更加直观,也更加易于程序员的阅读与维护。 Sass预处理器 变量 Sass允许定义变量用于代码复用,使用 $ 进行变量定义。在有使用相同属性的代码块时,可以通过定义一个变量,将复用的属性储存到变量中。当需要统一修改某个属性值时,就无须在代码中挨个去找需要修改的属性,而是直接修改变量即可。 在公共组件药品说明书中,对组件的边框样式进行了单独设置。此样式也用于组件内部各部分分隔的边框