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，进行动态布局

推荐阅读

天眼查企业法人在哪里查一个企业是否非正常户，查企业注册

小苏打怎样去衣服霉斑小苏打怎么去衣服霉斑

曲奇云盘在哪恢复误删的文件文件恢复教程一览

技术管理之路三、团队建设（怎么带队伍（））

运动|北京冬奥还没开，冰雪产业已经内卷了

安卓开发培训多少钱，参加Android开发培训需要多少钱

《秘密》它说（你可以成为任何你想成为的样子）

举例说明管理的五个特性

怎么做好吃的香菇肉酱面做好吃的香菇肉酱面的方法

你身边有渣女吗？她都是怎么玩弄男人的？

如何在戴尔服务器上正确插入网线？戴尔服务器怎么插网线

东山再起的山是哪座山?，东山再起的山是指哪一座山

不学礼无以立什么意思不学礼无以立的意思是什么

姜太公钓鱼是在哪条河钓的

免费的网上兼职在哪里找兼职工作哪里找

exit怎么读英语exit怎么读

你看过最毁三观最气愤的作品有哪些？

Machine|Machine Learning 错题整理第二周第一次

Gotocode-少儿编程课程有哪些亮点值得关注（）

linux下shell的PS1变量