将动态HTML页面转换为React / JSX

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>Button example</title>
    <script type="text/javascript" src="ButtonHandler.js"></script>
</head>

<body id="body" onload="init()">
    <button onclick=buttonHandler.writeToConsole()>Button</button>
    <script>

        function init() {
            buttonHandler = new ButtonHandler();
        }
    </script>
</body>

</html>

ButtonHandler.js

function ButtonHandler() {

};

ButtonHandler.prototype.writeToConsole = function () {
    console.log('Writing');
}

只要单击按钮，它就会简单地打印到控制台。

忽略ButtonHandler的构造函数为空，而我可以直接在onclick中轻松调用“ console.log”。 这是我遇到的问题的简化版本，包含多个类。

我的问题是，如何将其转换为React / JSX， 理想情况下不修改Javascript文件 （在这种情况下，仅是ButtonHandler.js）。 理想情况下，这意味着无需导出/导入，我想按照HTML文件的方式进行操作-它只是链接到<\\ head>中的脚本。

我最接近的是这样的：

convert.jsx

import * as React from 'react';   

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

    componentDidMount() {
        buttonHandler = new ButtonHandler();
    }

    render() {
        return (
            <div>
                <title>Button example</title>
                <button onclick="buttonHandler.writeToConsole()">Button</button>
            </div>

        )
    }
}

但是我得到了ButtonHandler未定义的错误。 我按照这个stackexchange答案放置

<script type="text/javascript" src="[rest of path...]/ButtonHandler.js"></script>

在public / index头中，我在componentDidMount（）中添加了“ window.ButtonHandler”，但仍然收到未定义的错误。

我在做错什么吗？如果没有，我可以采取其他什么方法？

编辑：当我将ButtonHandler.js放在带有索引的公共文件夹中，并控制台记录窗口时，我看到它显示为窗口的函数，如stackexchange答案所述。 但是，当我将其放在另一个文件夹中时不会发生这种情况。 但是，同样的错误。

编辑2：似乎唯一的解决方案是将ButtonHandler.js放在公共文件夹中，然后像选择的答案所说的那样在构造函数中调用它。 然后添加一个

<button onClick={() => this.buttonHandler.writeToConsole()}>Button</button>

称呼它。

Answer 1

在create react app中，您应该能够将任何js文件添加到公用文件夹中以在项目中使用。 您只需要引用脚本中的文件，例如：

<script type="text/javascript" src="%PUBLIC_URL%/ButtonHandler.js"></script>

这样可以确保在构建时它会出现在公用文件夹中。

唯一的问题是文件不会在捆绑包中缩小。

编辑

您还必须在组件内部引用全局变量。

/* global ButtonHandler */

import * as React from 'react';   

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

render() {
    return (
        <div>
            <title>Button example</title>
            <button onclick={this.buttonHandler.writeToConsole}>Button</button>
        </div>

    )
  }
}

Answer 2

您将要import该ButtonHandler js代码。 如果这不是您自己编写的，那么最简单的方法就是查看它是否已经作为React软件包存在。 如果它是您自己的文件，那么您将要导出ButtonHandler.js中的函数， import ButtonHandler中的ButtonHandler import ButtonHandler ，然后您就可以在该组件中访问它们。

ButtonHandler.js

export function writeToConsole() {
  console.log('Writing');
}

convert.jsx

import React, { Component } from 'react';
import { writeToConsole } from './ButtonHandler';

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

  render() {
    return (
      <div>
        <title>Button example</title>
        <button onclick={this.writeToConsole}>Button</button>
      </div>

    )
  }
}

将动态HTML页面转换为React / JSX

问题描述

example.html的

ButtonHandler.js

convert.jsx

2 个解决方案

解决方案1
1 已采纳 2019-01-07 21:18:31

解决方案2
0 2019-01-07 21:07:32

将动态HTML页面转换为React / JSX

问题描述

example.html的

ButtonHandler.js

convert.jsx

2 个解决方案

解决方案1 1 已采纳 2019-01-07 21:18:31

解决方案2 0 2019-01-07 21:07:32

解决方案1
1 已采纳 2019-01-07 21:18:31

解决方案2
0 2019-01-07 21:07:32