Question

作为一个简单的示例，假设我有以下两个文件：

example.html

wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//section[@class='section newSec none']/div//input[@id='empDob']")));

ButtonHandler.js

driver.findElement(By.xpath("//section[@class='section newSec none']/div//input[@id='empDob']")).clear();
driver.findElement(By.xpath("//section[@class='section newSec none']/div//input[@id='empDob']")).sendKeys(dateTime);

//Wait until date is clickable in datepicker panel

String datexpath = "//th[contains(text(),' "+year+"')]/ancestor::table//td[text()='"+day1[1]+"']";
wait.until(ExpectedConditions.elementToBeClickable(By.xpath(datexpath)));
driver.findElement(By.xpath(datexpath)).click();

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

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

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

我最近的是这样的：

convert.jsx

<!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未定义。我遵循了这个stackexchange answer并将其放置

function ButtonHandler() {

};

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

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

我做错什么了吗？如果没有，我还能采取什么其他方法？

edit：当我将ButtonHandler.js放入带有索引的公共文件夹中，并控制台登录窗口时，我看到它是窗口的功能，就像stackexchange答案描述的那样。但是，当我将其放在另一个文件夹中时不会发生这种情况。但是，同样的错误。

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

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> ) } }

调用它。

Answer 1

在create react应用程序中，您应该能够将任何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软件包存在。如果它是您自己的文件，则需要在React组件中的ButtonHandler.js中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 个答案: