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)}

最终效果：

image.png