1.在HTML裡面支援contextmenu事件（右鍵事件）。所以需要在組建載入完時新增此事件，銷燬組建時移除此事件。

    2. 需要增加一個state，名稱為visible，用來控制選單是否顯示。在_handleContextMenu（右鍵事件）裡面，它被設定為true，從而可以顯示出來。那麼，當滑鼠點選其它位置或者滾動的時候，需要把 它設定為false。

     例如程式碼：

class ContextMenu extends React.Component {
        constructor(props) {
               super(props);
               this.state = {
                   visible: false,
               };
         }

       componentDidMount() {
             document.addEventListener('contextmenu', this._handleContextMenu);
             document.addEventListener('click', this._handleClick);
             document.addEventListener('scroll', this._handleScroll);
        };

       componentWillUnmount() {
           document.removeEventListener('contextmenu', this._handleContextMenu);
           document.removeEventListener('click', this._handleClick);
           document.removeEventListener('scroll', this._handleScroll);
       }

       _handleContextMenu = (event) => {
            event.preventDefault();

             this.setState({ visible: true });

            const clickX = event.clientX;
            const clickY = event.clientY;               //事件發生時滑鼠的Y座標
            const screenW = window.innerWidth;   //文件顯示區的寬度
            const screenH = window.innerHeight;
            const rootW = this.root.offsetWidth;     //右鍵選單本身元素的寬度
            const rootH = this.root.offsetHeight;

           // right為true，說明滑鼠點選的位置到瀏覽器的右邊界的寬度可以放contextmenu。

           // 否則，選單放到左邊。 // top和bottom，同理。

            const right = (screenW - clickX) > rootW;
            const left = !right;
            const top = (screenH - clickY) > rootH;
            const bottom = !top;

            if (right) {
                this.root.style.left = `${clickX + 15}px`;
             }

            if (left) {
                  this.root.style.left = `${clickX - rootW - 15}px`;
            }

            if (top) {
                this.root.style.top = `${clickY + 15}px`;
            }

            if (bottom) {
                this.root.style.top = `${clickY - rootH - 15}px`;
             }
      };

      _handleClick = (event) => {
             const { visible } = this.state;
             const wasOutside = !(event.target.contains === this.root);

             if (wasOutside && visible) this.setState({ visible: false, });
      };

      _handleScroll = () => {
             const { visible } = this.state;

             if (visible) this.setState({ visible: false, });
        };

      render() {
         const { visible } = this.state;

     return

       { visible？
             <div ref={ref => {this.root = ref}} className="contextMenu">
                 <div>右鍵選單內容</div>
          </div>: null}
    };
}

ReactDOM.render(<ContextMenu />, document.getElementById('root'));