Affix

這個元件是一個圖釘元件，使用的fixed佈局，讓元件固定在視窗的某一個位置上，並且可以在到達指定位置的時候才去固定。

AffixProps

還是老樣子，看一個元件首先我們先來看看他可以傳入什麼引數

  // Affix
  export interface AffixProps {
    /**
    * 距離視窗頂部達到指定偏移量後觸發
    */
    offsetTop?: number;
    offset?: number;
    /** 距離視窗底部達到指定偏移量後觸發 */
    offsetBottom?: number;
    style?: React.CSSProperties;
    /** 固定狀態改變時觸發的回撥函式 */
    onChange?: (affixed?: boolean) => void;
    /** 設定 Affix 需要監聽其滾動事件的元素，值為一個返回對應 DOM 元素的函式 */
    target?: () => Window | HTMLElement;
    // class樣式名稱空間，可以定義自己的樣式命名
    prefixCls?: string;
  }複製程式碼

Render()

看完傳入引數之後，就到入口函式看看這裡用到了什麼引數

  render() {
    // 構造當前元件的class樣式
    const className = classNames({
      [this.props.prefixCls || `ant-affix`]: this.state.affixStyle,
    });
    // 這裡和之前看的一樣，忽略掉props中的在div標籤上面不需要的一些屬性
    // 但是貌似沒有去掉offset，後面我還查了一下DIV上面能不能有offset
    // 但是沒看見有offset，只看見offsetLeft, offsetHeight....
    const props = omit(this.props, [`prefixCls`, `offsetTop`, `offsetBottom`, `target`, `onChange`]);
    const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
    return (
      // 注意咯 看這裡placeholder的作用了 如圖
      // 這裡的placeholder的作用是當這個元件樣式變為fixed的時候，
      // 會脫離文件流，然後導致原本的dom結構變化，寬高都會有所變化
      // 所以這是後放一個佔位元素來頂住這一元件脫離文件流的時候的影響
      <div {...props} style={placeholderStyle}>
        <div className={className} ref="fixedNode" style={this.state.affixStyle}>
          {this.props.children}
        </div>
      </div>
    );
  }複製程式碼

接下來是重頭戲，從render函式中我們應該看到了，控制當前元件的主要因素是兩層div上的style這個屬性，那麼接下來我們就看看這兩個style是如果構造的

從生命週期開始

這個小小的元件卻有很多的程式碼，主要都是在處理狀態的程式碼，乍一看下來很沒有頭緒，所以就想著從他們的生命週期開始深入瞭解，然後在生命週期中果然開啟了新的世界，漸漸的理清楚了頭緒，接下來我將帶領大家一同來領略affix元件的風采：

  // 這裡就先將一些當前生命週期，元件做了什麼吧
  // 首先是在Didmount的時候，這時候首先確定當前的一個固定節點是Window還是傳入的DOM節點，
  // 然後利用setTargetEventListeners函式在這個固定節點上加上一些事件，
  // 然後設定一個當前元件的定時器，目的是希望在元件被銷燬的時候能夠將這些事件監聽一併清除
  // 敲黑板，大家一定要注意了，自己寫元件的時候如果存在什麼事件監聽的時候一定要在元件銷燬
  // 的時候將其一併清除，不然會帶來不必要的報錯
  componentDidMount() {
    const target = this.props.target || getDefaultTarget;
    // Wait for parent component ref has its value
    this.timeout = setTimeout(() => {
      this.setTargetEventListeners(target);
    });
  }

  // 接下來在接收到傳入引數的時候，檢查一下當前的固定節點是否和之前的一樣，
  // 不一樣的就重新給節點繫結事件，並且更新當前元件的位置
  componentWillReceiveProps(nextProps) {
    if (this.props.target !== nextProps.target) {
      this.clearEventListeners();
      this.setTargetEventListeners(nextProps.target);

      // Mock Event object.
      this.updatePosition({});
    }
  }

  // 在元件被銷燬的時候清除左右的繫結事件
  componentWillUnmount() {
    this.clearEventListeners();
    clearTimeout(this.timeout);
    (this.updatePosition as any).cancel();
  }複製程式碼

在這個三個生命週期中，我們看見了有這麼幾個函式，setTargetEventListeners,clearEventListeners,updatePosition,
我們就來看看他們都幹了啥吧

三個函式

  // 這裡先放一些這些函式需要用到的一些東西
  function getTargetRect(target): ClientRect {
    return target !== window ?
      target.getBoundingClientRect() :
      { top: 0, left: 0, bottom: 0 };
  }

  function getOffset(element: HTMLElement, target) {
    // 這裡的getBoundingClientRect()是一個很有用的函式，獲取頁面元素位置
    /**
    * document.body.getBoundingClientRect()
    * DOMRect {x: 0, y: -675, width: 1280, height: 8704, top: -675, …}
    *
    */
    const elemRect = element.getBoundingClientRect();
    const targetRect = getTargetRect(target);

    const scrollTop = getScroll(target, true);
    const scrollLeft = getScroll(target, false);

    const docElem = window.document.body;
    const clientTop = docElem.clientTop || 0;
    const clientLeft = docElem.clientLeft || 0;

    return {
      top: elemRect.top - targetRect.top +
        scrollTop - clientTop,
      left: elemRect.left - targetRect.left +
        scrollLeft - clientLeft,
      width: elemRect.width,
      height: elemRect.height,
    };
  }

  events = [
      `resize`,
      `scroll`,
      `touchstart`,
      `touchmove`,
      `touchend`,
      `pageshow`,
      `load`,
    ];

  eventHandlers = {};

  setTargetEventListeners(getTarget) {
    // 得到當前固定節點
    const target = getTarget();
    if (!target) {
      return;
    }
    // 將之前的事件全部清除
    this.clearEventListeners();
    // 迴圈給當前固定節點繫結每一個事件
    this.events.forEach(eventName => {
      this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
    });
  }

  // 將當前元件中的每一個事件移除
  clearEventListeners() {
    this.events.forEach(eventName => {
      const handler = this.eventHandlers[eventName];
      if (handler && handler.remove) {
        handler.remove();
      }
    });
  }

  // 重點來了，劃重點了，這段程式碼很長，但是總的來說是在計算元件和當前的固定節點之前的一個距離
  // 在最外層有一個有意思的東西 就是裝飾器，等會我們可以單獨醬醬這個裝飾做了啥，
  // 如果對於裝飾器不是很明白的同學可以去搜一下es6的裝飾器語法糖和設計模式中的裝飾器模式
  @throttleByAnimationFrameDecorator()
  updatePosition(e) {
    // 從props中獲取到需要用到的引數
    let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
    const targetNode = target();

    // Backwards support
    // 為了做到版本相容，這裡獲取一下偏移量的值
    offsetTop = offsetTop || offset;
    // 獲取到當前固定節點的滾動的距離
    //getScroll函式的第一引數是獲取的滾動事件的dom元素
    // 第二個引數是x軸還是y軸上的滾動， y軸上的為true
    const scrollTop = getScroll(targetNode, true);
    // 找到當前元件的Dom節點
    const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
    // 獲取當前元件Dom節點和當前固定節點的一個相對位置
    const elemOffset = getOffset(affixNode, targetNode);
    // 將當前的節點的寬高設定暫存，等會需要賦值給placeholder的樣式
    const elemSize = {
      width: this.refs.fixedNode.offsetWidth,
      height: this.refs.fixedNode.offsetHeight,
    };
    // 定義一個固定的模式，頂部還是底部
    const offsetMode = {
      top: false,
      bottom: false,
    };
    // Default to `offsetTop=0`.
    if (typeof offsetTop !== `number` && typeof offsetBottom !== `number`) {
      offsetMode.top = true;
      offsetTop = 0;
    } else {
      offsetMode.top = typeof offsetTop === `number`;
      offsetMode.bottom = typeof offsetBottom === `number`;
    }
    // 獲取到固定節點的位置資訊
    const targetRect = getTargetRect(targetNode);
    // 算出固定節點的高度
    const targetInnerHeight =
      (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
    // 如果滾動條的距離大於元件位置高度減去傳入引數的高度，並且偏移模式為向上的時候，這時候就是固定在頂部
    if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
      // Fixed Top
      const width = elemOffset.width;
      this.setAffixStyle(e, {
        position: `fixed`,
        top: targetRect.top + (offsetTop as number),
        left: targetRect.left + elemOffset.left,
        width,
      });
      this.setPlaceholderStyle({
        width,
        height: elemSize.height,
      });
    } else if (
      // 如果滾動距離小於元件位置高度減去元件高度和傳入引數的高度並且偏移模式為向下的時候，為固定在底部
      scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
        offsetMode.bottom
    ) {
      // Fixed Bottom
      const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
      const width = elemOffset.width;
      this.setAffixStyle(e, {
        position: `fixed`,
        bottom: targetBottomOffet + (offsetBottom as number),
        left: targetRect.left + elemOffset.left,
        width,
      });
      this.setPlaceholderStyle({
        width,
        height: elemOffset.height,
      });
    } else {
      const { affixStyle } = this.state;
      // 如果上面兩者都是不的時候，但是如果視窗resize了，那就重新計算，然後賦值給元件
      if (e.type === `resize` && affixStyle && affixStyle.position === `fixed` && affixNode.offsetWidth) {
        this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth });
      } else {
        // 如果以上情況都不是，那就樣式不變
        this.setAffixStyle(e, null);
      }
      this.setPlaceholderStyle(null);
    }
  }複製程式碼

用到的其他輔助函式

在上面這一塊程式碼中，有幾個函式是外部輔助函式，但是卻是比較有意思的，因為這些輔助函式需要寫的很有複用性才有作用，所以正是我們值得學的地方
getScroll(), throttleByAnimationFrameDecorator裝飾器，這兩個東西是值得我們學習的，並且我們會一起學習裝飾器模式

getScroll()

這個函式主要是獲取到傳入的dom節點的滾動事件，其中需要講解的是window.document.documentElement
它可以返回一個當前文件的一個根節點，詳情可以檢視這裡

  export default function getScroll(target, top): number {
    if (typeof window === `undefined`) {
      return 0;
    }
    // 為了相容火狐瀏覽器，所以新增了這一句
    const prop = top ? `pageYOffset` : `pageXOffset`;
    const method = top ? `scrollTop` : `scrollLeft`;
    const isWindow = target === window;

    let ret = isWindow ? target[prop] : target[method];
    // ie6,7,8 standard mode
    if (isWindow && typeof ret !== `number`) {
      ret = window.document.documentElement[method];
    }

    return ret;
  }複製程式碼

throttleByAnimationFrameDecorator裝飾器

首先我們需要知道裝飾器的語法糖，可以檢視這裡

還有typescript裝飾器

接下來我們還需要知道為什麼使用裝飾器，我這裡就是簡單的說一下，裝飾器模式主要就是為了動態的增減某一個

類的功能而存在的，詳情可以檢視這裡

// `../_util/getRequestAnimationFrame`
// 由於下面的裝飾器還使用了這個檔案裡面的函式，所以一併給搬過來了
const availablePrefixs = [`moz`, `ms`, `webkit`];

function requestAnimationFramePolyfill() {
  // 這個函式用來生成一個定時器的或者監聽器ID，如果當前定時器不是window
  // 上面的requestAnimationFrame那就自己生成一個，用於以後清除定時器使用
  let lastTime = 0;
  return function(callback) {
    const currTime = new Date().getTime();
    const timeToCall = Math.max(0, 16 - (currTime - lastTime));
    const id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
    lastTime = currTime + timeToCall;
    return id;
  };
}

export default function getRequestAnimationFrame() {
  // 這個函式返回一個定時器或者監聽器ID
  if (typeof window === `undefined`) {
    return () => {};
  }
  if (window.requestAnimationFrame) {
    // https://github.com/vuejs/vue/issues/4465
    return window.requestAnimationFrame.bind(window);
  }
  // 做了瀏覽器相容
  const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0];

  return prefix
    ? window[`${prefix}RequestAnimationFrame`]
    : requestAnimationFramePolyfill();
}

export function cancelRequestAnimationFrame(id) {
  // 這個函式用來根據ID刪除對應的定時器或者監聽器
  if (typeof window === `undefined`) {
    return null;
  }
  if (window.cancelAnimationFrame) {
    return window.cancelAnimationFrame(id);
  }
  const prefix = availablePrefixs.filter(key =>
    `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window,
  )[0];

  return prefix ?
    (window[`${prefix}CancelAnimationFrame`] || window[`${prefix}CancelRequestAnimationFrame`]).call(this, id)
    : clearTimeout(id);
}複製程式碼

import getRequestAnimationFrame, { cancelRequestAnimationFrame } from `../_util/getRequestAnimationFrame`;

// 獲得一個定時器或者監聽器
const reqAnimFrame = getRequestAnimationFrame();
// 這個函式收到一個函式 返回一個被放入監聽其或者定時器額函式，
// 也就是說給這個傳入的函式繫結了一個id，讓他成為唯一的一個，
// 這樣在消除他的時候也很方便
export default function throttleByAnimationFrame(fn) {
  let requestId;

  const later = args => () => {
    requestId = null;
    fn(...args);
  };

  const throttled = (...args) => {
    if (requestId == null) {
      // 獲取定時器或者監聽器ID，將監聽事件傳入
      requestId = reqAnimFrame(later(args));
    }
  };
  // 給這個函式新增上一個取消的函式
  (throttled as any).cancel = () => cancelRequestAnimationFrame(requestId);
  // 返回構造的新函式
  return throttled;
}

export function throttleByAnimationFrameDecorator() {
  return function(target, key, descriptor) {
    // 裝飾器函式，傳入typescript的方法構造器的三個引數
    // target: 當前函式（屬性）屬於的類
    // key: 當前函式（屬性）名
    // dedescriptor： 當前屬性的描述
    let fn = descriptor.value;
    let definingProperty = false;
    return {
      configurable: true,
      // 這裡有一個疑惑 就是這個get（）函式是在什麼時候被執行的呢？ 
      // 因為從外部看來 這個函式最多隻執行到了上一層的return，這一層的
      // 沒有被執行，那麼一下程式碼都不會走，但是卻能夠呼叫新函式裡面的屬性。。。 好神奇，
      // 希望有大神能夠在此解說一下 萬分感激
      get() {
        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
          return fn;
        }

        let boundFn = throttleByAnimationFrame(fn.bind(this));
        definingProperty = true;
        // 重新將傳入的函式定義成構造的新函式並且返回
        Object.defineProperty(this, key, {
          value: boundFn,
          configurable: true,
          writable: true,
        });
        definingProperty = false;
        return boundFn;
      },
    };
  };
}複製程式碼

補（裝飾器中的get以及set解讀）

下來之後我自己模擬了一下上面的裝飾器，程式碼如下，並且通過查詢一些資料，知道了get和set是在什麼時候被呼叫的

在寫裝飾器程式碼的時候需要在tsconfig.json檔案中的compilerOptions屬性新增一下程式碼
"experimentalDecorators": true

這個get函式會在類被例項化的時候就進行呼叫，所以就能夠將這些屬性賦給外部的target

也就是在this.callDecorator的時候

順帶說一下set函式 會在 this.callDecorator = something 的時候呼叫

Demo元件

  import * as React from `react`;
  import * as PropTypes from `prop-types`;
  import { MyDecorator } from `./Decorator`;

  export interface DemoProps {
    helloString?: string;
  }

  export default class DecoratorTest extends React.Component<DemoProps, any> {
    static propTypes = {
      helloString: PropTypes.string,
    };

    constructor(props) {
      super(props);
    }

    @MyDecorator()
    callDecorator() {
      console.log(`I am in callDecorator`);
    }

    componentDidMount() {
      this.callDecorator();
      (this.callDecorator as any).cancel();
    }

    render() {
      return (
        <div>
          {this.props.helloString}
        </div>
      );
    }
  }複製程式碼

裝飾器程式碼

  export default function decoratorTest(fn) {
    console.log(`in definingProperty`);
    const throttled = () => {
      fn();
    };

    (throttled as any).cancel = () => console.log(`cancel`);

    return throttled;
  }

  export function MyDecorator() {
    return function(target, key, descriptor) {
      let fn = descriptor.value;
      let definingProperty = false;
      console.log(`before definingProperty`);
      return {
        configurable: true,
        // get: function()這樣的寫法也是可以執行
        get() {
          if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
            return fn;
          }
          let boundFn = decoratorTest(fn.bind(this));
          definingProperty = true;
          Object.defineProperty(this, key, {
            value: boundFn,
            configurable: true,
            writable: true,
          });
          definingProperty = false;
          return boundFn;
        },
      };
    };
  }複製程式碼

輸順序結果如圖

完整程式碼

  import React from `react`;
  import ReactDOM from `react-dom`;
  import PropTypes from `prop-types`;
  import addEventListener from `rc-util/lib/Dom/addEventListener`;
  import classNames from `classnames`;
  import shallowequal from `shallowequal`;
  import omit from `omit.js`;
  import getScroll from `../_util/getScroll`;
  import { throttleByAnimationFrameDecorator } from `../_util/throttleByAnimationFrame`;

  function getTargetRect(target): ClientRect {
    return target !== window ?
      target.getBoundingClientRect() :
      { top: 0, left: 0, bottom: 0 };
  }

  function getOffset(element: HTMLElement, target) {
    const elemRect = element.getBoundingClientRect();
    const targetRect = getTargetRect(target);

    const scrollTop = getScroll(target, true);
    const scrollLeft = getScroll(target, false);

    const docElem = window.document.body;
    const clientTop = docElem.clientTop || 0;
    const clientLeft = docElem.clientLeft || 0;

    return {
      top: elemRect.top - targetRect.top +
        scrollTop - clientTop,
      left: elemRect.left - targetRect.left +
        scrollLeft - clientLeft,
      width: elemRect.width,
      height: elemRect.height,
    };
  }

  function noop() {}

  function getDefaultTarget() {
    return typeof window !== `undefined` ?
      window : null;
  }

  // Affix
  export interface AffixProps {
    /**
    * 距離視窗頂部達到指定偏移量後觸發
    */
    offsetTop?: number;
    offset?: number;
    /** 距離視窗底部達到指定偏移量後觸發 */
    offsetBottom?: number;
    style?: React.CSSProperties;
    /** 固定狀態改變時觸發的回撥函式 */
    onChange?: (affixed?: boolean) => void;
    /** 設定 Affix 需要監聽其滾動事件的元素，值為一個返回對應 DOM 元素的函式 */
    target?: () => Window | HTMLElement;
    prefixCls?: string;
  }

  export default class Affix extends React.Component<AffixProps, any> {
    static propTypes = {
      offsetTop: PropTypes.number,
      offsetBottom: PropTypes.number,
      target: PropTypes.func,
    };

    scrollEvent: any;
    resizeEvent: any;
    timeout: any;
    refs: {
      fixedNode: HTMLElement;
    };

    events = [
      `resize`,
      `scroll`,
      `touchstart`,
      `touchmove`,
      `touchend`,
      `pageshow`,
      `load`,
    ];

    eventHandlers = {};

    constructor(props) {
      super(props);
      this.state = {
        affixStyle: null,
        placeholderStyle: null,
      };
    }

    setAffixStyle(e, affixStyle) {
      const { onChange = noop, target = getDefaultTarget } = this.props;
      const originalAffixStyle = this.state.affixStyle;
      const isWindow = target() === window;
      if (e.type === `scroll` && originalAffixStyle && affixStyle && isWindow) {
        return;
      }
      if (shallowequal(affixStyle, originalAffixStyle)) {
        return;
      }
      this.setState({ affixStyle }, () => {
        const affixed = !!this.state.affixStyle;
        if ((affixStyle && !originalAffixStyle) ||
            (!affixStyle && originalAffixStyle)) {
          onChange(affixed);
        }
      });
    }

    setPlaceholderStyle(placeholderStyle) {
      const originalPlaceholderStyle = this.state.placeholderStyle;
      if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
        return;
      }
      this.setState({ placeholderStyle });
    }

    @throttleByAnimationFrameDecorator()
    updatePosition(e) {
      let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
      const targetNode = target();

      // Backwards support
      offsetTop = offsetTop || offset;
      const scrollTop = getScroll(targetNode, true);
      const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
      const elemOffset = getOffset(affixNode, targetNode);
      const elemSize = {
        width: this.refs.fixedNode.offsetWidth,
        height: this.refs.fixedNode.offsetHeight,
      };

      const offsetMode = {
        top: false,
        bottom: false,
      };
      // Default to `offsetTop=0`.
      if (typeof offsetTop !== `number` && typeof offsetBottom !== `number`) {
        offsetMode.top = true;
        offsetTop = 0;
      } else {
        offsetMode.top = typeof offsetTop === `number`;
        offsetMode.bottom = typeof offsetBottom === `number`;
      }

      const targetRect = getTargetRect(targetNode);
      const targetInnerHeight =
        (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
      if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
        // Fixed Top
        const width = elemOffset.width;
        this.setAffixStyle(e, {
          position: `fixed`,
          top: targetRect.top + (offsetTop as number),
          left: targetRect.left + elemOffset.left,
          width,
        });
        this.setPlaceholderStyle({
          width,
          height: elemSize.height,
        });
      } else if (
        scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
          offsetMode.bottom
      ) {
        // Fixed Bottom
        const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
        const width = elemOffset.width;
        this.setAffixStyle(e, {
          position: `fixed`,
          bottom: targetBottomOffet + (offsetBottom as number),
          left: targetRect.left + elemOffset.left,
          width,
        });
        this.setPlaceholderStyle({
          width,
          height: elemOffset.height,
        });
      } else {
        const { affixStyle } = this.state;
        if (e.type === `resize` && affixStyle && affixStyle.position === `fixed` && affixNode.offsetWidth) {
          this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth });
        } else {
          this.setAffixStyle(e, null);
        }
        this.setPlaceholderStyle(null);
      }
    }

    componentDidMount() {
      const target = this.props.target || getDefaultTarget;
      // Wait for parent component ref has its value
      this.timeout = setTimeout(() => {
        this.setTargetEventListeners(target);
      });
    }

    componentWillReceiveProps(nextProps) {
      if (this.props.target !== nextProps.target) {
        this.clearEventListeners();
        this.setTargetEventListeners(nextProps.target);

        // Mock Event object.
        this.updatePosition({});
      }
    }

    componentWillUnmount() {
      this.clearEventListeners();
      clearTimeout(this.timeout);
      (this.updatePosition as any).cancel();
    }

    setTargetEventListeners(getTarget) {
      const target = getTarget();
      if (!target) {
        return;
      }
      this.clearEventListeners();

      this.events.forEach(eventName => {
        this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
      });
    }

    clearEventListeners() {
      this.events.forEach(eventName => {
        const handler = this.eventHandlers[eventName];
        if (handler && handler.remove) {
          handler.remove();
        }
      });
    }

    render() {
      const className = classNames({
        [this.props.prefixCls || `ant-affix`]: this.state.affixStyle,
      });

      const props = omit(this.props, [`prefixCls`, `offsetTop`, `offsetBottom`, `target`, `onChange`]);
      const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
      return (
        <div {...props} style={placeholderStyle}>
          <div className={className} ref="fixedNode" style={this.state.affixStyle}>
            {this.props.children}
          </div>
        </div>
      );
    }
  }複製程式碼