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

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

页面需求：优化代码

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

<div className={videoFrameWrapperClass} style={{left: '0px',top: '10.5px',width: '632px',height: '474px',fontSize: '12.64pt'}}>
  <div className={videoBoxLocalClass}>
    <div style={{height: '100%'}}>
      <div className={videoFrameItemClass}>
        <Zuk.VideoRtc refid="local_video" muted="muted"/>
      </div>
    </div>
  </div>  
</div>

<div className={videoFrameWrapperClass} style={{left: '632px',top: '10.5px',width: '632px',height: '474px',fontSize: '12.64pt'}}>
  <div className={videoBoxLocalClass}>
    <div style={{height: '100%'}}>
      <div className={videoFrameItemClass}>
        <Zuk.ConnectionStatus />
        <Zuk.VideoRtc refid="remote_video" muted="false"/>
      </div>
    </div>
    <Zuk.VideoBottomLeftStatus />
    <Zuk.VideoBottomToolbar />
  </div>  
</div>

相应的子组件中 要传递

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

<div style={{height: '100%', width: '100%'}}>
 <Zuk.VideoFrameWrapper refid="local_video" islocal="local" style={{left: '0px',top: '10.5px',width: '632px',height: '474px',fontSize: '12.64pt'}} />
  <Zuk.VideoFrameWrapper refid="local_video" islocal="local" style={{...firstStyle}} />
  <Zuk.VideoFrameWrapper refid="remote_video" islocal="remote" style={{...this.getPosition(1)}} />
</div>

对应的

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(<Zuk.VideoFrameWrapper refid="local_video" islocal={local} style={{...this.getPosition(i)}} />)
  }
  return res
}

使用方式：

<div style={{height: '100%', width: '100%'}}>
  {this.FrameList(this.state.psnNum)}
</div>

最终效果：

image.png