React Center div

Question

我正在使用react来构建一个对话框组件，我希望能够计算出左侧和顶部来居中固定的对话框位置。

我知道

left= windowWidth/2 -(dialogWidth /2)

问题是对话框宽度是动态生成的。

如何计算对话框宽度。

我不是在使用css之后，我想使用react或javascript来获取这些数据。

以下是我当前的组件

import * as React from 'react';
import { any } from 'prop-types';

export default class Dialog extends React.PureComponent<{
    children: React.ReactDOM,
    isOpen?: Boolean,
    title?: string,
    save?: Function
}>
{
    public state = {
        left: 0,
        top: 0,
        isOpen: this.props.isOpen
    }


    public toggle() {
        /// Calculate position and toggld open
    }

    render() {

        return (
            <div className="dialog" style={{ left: this.state.left, top: this.state.top, display: (this.state.isOpen ?"block": "hidden") }}>
                <h2 className="header">{this.props.title}
                    <span className="btn"></span>
                </h2>
                <div className="center"></div>
            </div>
        )


    }
}

让我知道你在想什么

Answer 1

你可以通过element.clientWidth随时到达元素的宽度。所以(window.innerWidth - element.clientWidth) / 2应该在元素的左边给你留出空格。如果有帮助，请告诉我。

Answer 2

好的，我得到了一个使用reactDOM的解决方案

下面是如何实现的

   var el = ReactDom.findDOMNode(this) as HTMLElement;
            var offset = el.getElementsByClassName("dialog")[0].getBoundingClientRect();
            var left = window.outerWidth / 2 - (offset.width / 2);
            var top = window.outerHeight / 2 - (offset.height / 2);
            this.setState({ left: left, top: top });