Question

我有以下内容：

import React from 'react';
import {render} from 'react-dom';

class Splash extends React.Component {
    updateVideoMarginTop() {
        // update #video-wrapper height() to match window.height
    }
    render () {
        return (
            <div className="video-wrapper">
                <video id="video">
                    <source id="mp4" src="video/sample.mp4" type="video/mp4" />
                </video>
            </div>  
        );
    }
}

export default Splash;

更新组件的margin-top以匹配窗口高度的最佳方法是什么（更少的jQuery和更多反应，如果可能）？

Answer 1

您可以使用内联样式，例如：

import React from 'react'; 
import { render } from 'react-dom';

class Splash extends React.Component {
  render () {
    return (
      <div className="video-wrapper" style={{ marginTop: `${window.innerHeight}px` }}>
        <video id="video">
          <source id="mp4" src="video/sample.mp4" type="video/mp4" />
        </video>
      </div>  
    );
  } 
}

export default Splash;

注意外部div上的style属性。您可以将内联样式应用于任何元素。请记住，您申请的CSS是用camelCase编写的，例如background-color变为backgroundColor，所有值都必须在引号中（与真正的css不同）。

使用jQuery更新组件margin-top

1 个答案: