React|React 采用...传递style，进行动态布局 React采用...传递style，进行动态

React 采用...传递style，进行动态布局页面需求：优化代码

两个videoFrameWrapperClass 为同级元素，相应的为了组件可重用行，将其升级为VideoFrameWrapper组件。

相应的子组件中要传递

const {refid,islocal,style} = this.props;

关于组件style 传递有个技巧：
下面为三种使用方式：

直接传值 left: '0px',top: '10.5px',width: '632px',height: '474px',fontSize: '12.64pt'；
利用变量 firstStyle = this.getPosition(0);
直接使用 ...this.getPosition(0);

对应的

getPosition = (_index) =>{ .......... return {left: left+'px',top: '10.5px',width: vcWith+'px',height: vcHeight+'px',fontSize: '12.64pt'}; };

进阶任意多个组件，由length决定

FrameList = (length) => { var res = []; for(var i = 0; i < length; i++) { var local = i==0 ? 'local' : 'remote'; res.push() } return res }

使用方式：

{this.FrameList(this.state.psnNum)}

【React|React 采用...传递style，进行动态布局】最终效果：

文章图片
image.png

React|React 采用...传递style，进行动态布局

推荐阅读

婕珞芙晨露蔷薇面膜怎么样婕路芙晨露蔷薇面膜可以分两次用吗

猪肉各部位的区别猪肉哪个部位是一等肉

最早指南车发明人指南车发明者

银天下行情分析系统软件下载

redis跳跃表查找数据的过程 redis哪块用到跳表

华为荣耀play3有没有指纹解锁（华为荣耀play3有指纹解锁吗）

amdk15支持什么cpu，amdk15主板支持的cpu

女性揉地筋的好处主要有这些好处

汽车原厂互联映射什么意思

常年不在家冰箱怎么办？如何维护和保养？

怎样识别变频空调和定频空调空调开一天多少钱

七绝（云水一梦惹东风）

新办企业个税申报密码申报个税在哪个软件，企业个税能用手机申报吗

运动会通讯稿300字

美的SC861A吸尘器不充电的解决方法

刘海屏|iPhone 14强势曝光：是不是后悔手里的iPhone 13买早了？

iphone|从12999元跌至10488元，12G+512G，华为顶级旗舰现货供应不用抢购

绝地求生刺激战场国际服绝地求生刺激战场国际服下载方法有哪些

无症状感染者会一直不发病吗

泰顺云雾茶是什么茶泰顺雾云农庄