解决方案：

Question

假设我有以下两个文件：

example.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <title>Example</title>
    <script type="text/javascript" src="BodyPrinter.js"></script>
</head>

<body id="body" onload="init()">
    <button onclick="bodyPrinter.printBody()">Print body</button>
    <script>
        function init() {
            bodyPrinter = new BodyPrinter();
        }
    </script>
</body>
</html>

BodyPrinter.js

function BodyPrinter() {
    this.body = document.getElementById('body');
};

BodyPrinter.prototype.printBody = function () {
    console.log(this.body);
}

单击按钮时，将打印HTML的。之所以行之有效，是因为首先加载HTML及其所有元素，然后init（）创建BodyPrinter，该BodyPrinter将访问HTML元素并进行打印。

目前，我正在转换为React，并尝试尽可能少地更改（除了添加导出export default BodyPrinter; 在BodyPrinter.js中）；

convert.jsx

import * as React from 'react';
import BodyPrinter from './BodyPrinter';

export default class Entry extends React.Component {
    constructor(props) {
        super(props);
        this.bodyPrinter = new BodyPrinter();
    }


    render() {
        return (
            <div>
                <title>Example</title>
                <button onClick={() => this.bodyPrinter.printBody()}>Print body</button>
            </div>

        )
    }
}

出于我的目的，我需要在render（）方法中访问BodyPrinter，因此需要在构造函数中创建它。问题是在创建HTML之前调用了构造函数，因此BodyPrinter将只打印null。

如何解决此问题/让HTML在不修改BodyPrinter.js且仍然能够在render（）中访问的情况下首先加载？

解决方案：

我想出了一个解决方案。只需将要实例化的类放在componentDidMount（）而不是构造函数中即可。这样，您仍然可以在render（）中访问它们。

Answer 1

像这样吗？

import * as React from 'react';
import BodyPrinter from './BodyPrinter';

export default class Entry extends React.Component {
    constructor(props) {
        super(props);        
    }

    print() {
        var bodyPrinter = new BodyPrinter();
        bodyPrinter.printBody();
    }


    render() {
        return (
            <div>
                <title>Example</title>
                <button onClick={() => this.print}>Print body</button>
            </div>

        )
    }
}

Answer 2

首先，如果我们考虑性能。我们不应该在render方法中创建函数，因为在每次reRender之后都会创建一个新函数，其次是我们应该绑定函数或使用箭头函数更改this：

import * as React from 'react';
import BodyPrinter from './BodyPrinter';

export default class Entry extends React.Component {
    constructor(props) {
        super(props);    
        this.bodyPrinter = new BodyPrinter();    
    }

    print = () => {
        this.bodyPrinter.printBody();
    }


    render() {
        return (
            <div>
                <title>Example</title>
                <button onClick={this.print} type="button">Print body</button>
            </div>

        )
    }
}

将HTML / JS转换为React，首先加载JS并需要HTML元素

example.html

BodyPrinter.js

convert.jsx

解决方案：

2 个答案: