Question

这是父组件的一部分，在子组件呈现之后，该组件会在元素之间获得一些px测量值：

componentDidMount() {

    // get the element where print area resides
    let iframe = document.getElementById('ifmcontentstoprint').contentWindow.document.body;

    // get the list of elements
    let printArea = iframe.querySelectorAll('#printarea');
    let positionTitle = iframe.querySelectorAll('#printarea .position-title, .position-title-print');
    let pageFooter = iframe.querySelectorAll('#printarea tr.footer');          

    // total number of pages
    var i = positionTitle.length;

    // the position of the printarea within the the element
    let printAreaPos = printArea[0].getBoundingClientRect().top

    // iterate through the elements that are pairs
    for (let i = 0; i <= positionTitle.length - 1; i++) {
         console.log(pageFooter[i].getBoundingClientRect().top - positionTitle[i].getBoundingClientRect().top);
        pageFooter[i].style.marginTop = '50px';
    }
}

最终将以编程方式设置pageFooter[i].style.marginTop = '50px';的位置。现在仅使用静态数字进行测试。

这是应该在其中添加样式的子组件的一部分：

<tr className='footer'>
    <td id='hide'>
        <div>
            <div align='left' className='footer-columns'>
                <p className='effective-date'>DATE EFFECTIVE: {this.props.effectiveDate}</p>
                <p>&copy; THE COMPANY</p>
                <p>UNAUTHORIZED REPRODUCTION OR DISTRIBUTION PROHIBITED</p>
            </div>
            <div align='center' className='footer-columns middle-column'>
                <p>{this.props.surveyName}</p>
                <p>Page {i === 2 ? 1 : i === 5 ? 2 : i === this.props.totalCuts ? this.props.maxPages : null} of {this.props.maxPages}</p>
            </div>
            <div align='right' className='footer-columns'><img src={logo} alt='The Company Logo' /></div>
        </div>
    </td>
</tr>

我不知道为什么pageFooter[i].style.marginTop = '50px';没有得到反映，但是当我更改<tr className='footer' style={{ marginTop: '50px' }}>时，即使看起来好像正在渲染相同的HTML，它也能正常工作。

因此，我终于弄清楚了componentDidMount()中所做的修改，而这些修改并没有添加回DOM中-它们基本上只是挂在内存中。

如何将其发送回DOM？

我最终希望能够进行pageFooter - positionTitle位置比较，这需要先渲染子组件才能获得测量结果。

Answer 1

乍一看，我无法弄清楚为什么您的编码不起作用。我只是提供了另一种方法来查看此内容，这是通过让React控制元素本身的marginTop来实现的。为此，我们必须使用组件的状态存储所需的边距，然后按照您的指示使用{{ marginTop: measurement }}。这是这种方法的可能概述：

class YourComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = { margins: [] };
    }

    componentDidMount() {
        // same as your previous code ...
        const newMargins = [];

        for (let i = 0; i <= positionTitle.length - 1; i++) {
            newMargins.push('50px');
        }

         this.setState({ margins: newMargins });
    }

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

        // and finally, you somehow make margins[index] reach your
        // child component (the exact implementation depends on how
        // your component is structured)
        <tr className="footer" style={{ marginTop: margins[myIndex] }} />
    }
}

Answer 2

style属性用于设置DOM元素的样式，而不是任何变量或数组的样式。

因此，当您执行以下操作时：L = FF不是针对DOM元素，而是数组中的元素。为此，您可以执行以下操作：pageFooter[i].style.marginTop = '50px';。

渲染后在React组件中修改元素

2 个答案: