2

我想在 ReactJS App 中显示适合的本地视频。并尝试将宽度设置为 100%。但是如何在 React 中声明这种风格呢？

反应组件

componentDidMount() {
  Video.createLocalVideoTrack().then(track => {
     const localMediaContainer = this.refs.localMedia;
     localMediaContainer.appendChild(track.attach());
  });
}

render () {
  return (
      <div ref='localMedia' />
  )
}

结果：

<div>
  <video autoplay=""></video>
</div>

视频元素由 twilio track 自动创建（container.appenChild）。我想为这个元素定义 css 样式。

这适用于 HTML/JS：

div#local-media {
      width: 100%;
      height: 220px;          
      margin: 0 auto;

  div#local-media video {
    max-width: 100%;
    max-height: 100%;
    border: none;
  }

在反应：

const styles = theme => ({
    localMedia: {
        width: '100%',
        height: 220,         
        margin: '0 auto'

    }
});

如何在反应中声明子元素div#local-media video？

或者是否有另一种将媒体扩展到本地媒体 div 的解决方案？

更新 1： 由带有 appendChild 的 Twilio 代码生成的元素..

更新 2

我想我找到了解决方案？它正在工作

render() {
  return (
    <style jsx>{`
      video {
        max-width: 100%;
        max-height: 100%;
      }
    `}
    </style>

    <div ref='localMedia' />
  )
}
4

1 回答 1

0

由于您使用的是样式和主题，因此我可以期望您在 react 中使用 Material UI，那么您应该classes按照文档 ( https://material-ui.com/customization/themes/ ) 使用该对象。

所以代码应该是：

<div class={props.classes.localMedia}>
   <video autoplay=""></video>
</div>

你可以尝试这样做。

于 2018-12-06T11:07:22.740 回答