Question

在ReactJS应用程序中，我正在构建一个基于HTML表的组件。我给这个表中的一些元素一个ID，并有一个javascript文件，通过它们的ID处理特定的元素。通过脚本标记将这样的脚本链接到普通的HTML页面很简单，但在React应用程序中导入这个JS脚本似乎更加困难。

我该怎么办？ javascript文件是本地的，我知道我想在我的组件componentDidMount函数中加载它，因为它需要在创建HTML元素后加载。

以下是Javascript文件的示例：

var weirdTable = weirdTable(document.getElementById('table-id2'));

function weirdTable(tableHolder) {
    // Do stuff to elements in 'tableHolder' by their ID
}

我是否尝试添加＆＃39; export＆＃39;在var weirdTable前面，然后尝试使用该导出的变量？我想要做的就是说“应用这个javascript代码＆＃39;安装组件后立即

Answer 1

您可以做的只是导出您的函数export function weirdTable(tableHolder)。然后，在您的react组件文件中，使用import { weirdTable } from "your/path/to/file/"导入该函数，并在componentDidMount

中调用该函数

Answer 2

就像@Antoine所说，您应该从另一个文件中导出componentDidMount函数并将其导入到您的组件中。

但是，您可能不希望在weirdTable上使用它，因为您的应用正在运行，可能会发生状态更改，导致您的组件重新呈现，这可能会撤消render() { ... return ( ... <table id="table-id2" ... ref={function(element) { weirdTable(element) }} /> ... ); }已完成的内容到HTML元素（实际上取决于函数中正在做什么以及它如何影响DOM）。如果你想确保每次重新渲染都会调用这个函数，你可以使用ref：

public Dictionary<int, List<ScanLineNode>> allScanLineNodes = new Dictionary<int, List<ScanLineNode>>();

public void MethodName(ScanLineNode node [...])
{       
    //This will perform a raycast from the Node's position in the specified direction. If the raycast hits nothing, it will return Vector3.zero ('Row is complete'), otherwise will return the hit point

    Vector3 terminationPoint = node.RaycastDirection(node, direction, maxDist, targetRaycast, replacementColour, backgroundColour);

    ScanLineNode terminationNode = new ScanLineNode();

    //Previously attempted to store a local reference to this row being used, but also did not work
    //List<ScanLineNode> rowNodes = allScanLineNodes[node.rowNumber];

    [...]

    if (terminationPoint == Vector3.zero)
    {
        //Definitely reaches this point, and executes this function along the row, I have added breakpoints and checked what happens in this for loop. After running 'RowComplete' (which just changes 'rowComplete' from false to true) 'rowComplete' is still false. Just in case I've included the RowComplete() function below.

        Debug.Log("Row Complete: " + node.rowNumber);
        for (int i = 0; i < allScanLineNodes[node.rowNumber].Count; i++)
        {
            allScanLineNodes[node.rowNumber][i].RowCompleted();
        }
    }
}

您可以阅读有关ref here的更多信息。我建议你去阅读它，因为它的＆＃39;根据您的使用情况，功能可能非常有用。

ReactJS如何将Javascript脚本应用于现有元素？

2 个答案: