编辑

Question

我目前正在研究ReactJS。我正在以JSX样式进行编码，但是我有一个问题。如何使用我使用的常规格式的JavaScript库？

例如

myScript.js

(function () {
  var myTemp = "myTemp";

  function myFunction() {
    console.log("myFunction()")
  }
  function myFunction1() {
    console.log("myFunction()")
  }
  function myFunction2() {
    console.log("myFunction()")
  }
  function myFunction3() {
    console.log("myFunction()")
  }
}

当您具有上述来源的JavaScript库时，您可以在JSX或ReactJS中使用哪些方法？我必须将其转换为JSX并使用吗？

process.js是

import myScript from '~~~~/myScript'

export function proc() {
  myScript.myScript.myFunction();
}

sample.js是

import process from '~~~~/process'

export function sample() {
  process.proc();
}

Sample.js

import React, {Component} from 'react';
import * as sample from '~~~.sample';

class mySample extends Compoonent {

 click = () => {
    sample.sample()
  }

 render() {
    return (
      <button onClick={this.click}> button </button>
    )
 }
}
export default Sample;

我不知道如何导入myScript.js（正常格式的javascript，如Library）并调用MyScript.js函数...

Answer 1

即使reactjs本身也只是一个javascript库。从本质上讲，它仍然是javascript。

例如，当您使用“ JSX”书写时

const ele = <h1 className="foo">bar</h1>

它仍然会编译成常规的JS函数，如下所示：

const ele = React.createElement('h1', {className: 'foo'}, 'bar')

这里的重点是，您不应该像在学习不同于常规Javascript的东西一样学习React。

首先了解Javascript的基础知识，尤其是所有ES6语法，例如箭头函数() => {}，扩展语法...，类，结构化。

学习这些知识不会花很长时间，并且一旦掌握了基础知识，您就会了解到，您可以直接使用在React中发布的代码块。

Answer 2

您不能将其转换为JSX。

您可以做的是...

const export OuterTemp = () => () => {
var myTemp = "myTemp";
console.log("myFunction()") 
};

将此功能导入为：

import {outerTeamp} from './fileName.js';

Answer 3

正如@Anil Kumar提到的那样，您可以将整个代码包装在外部库中以const变量并将其导出。由于您正在使用先前编写的代码，因此无需对内部函数进行任何更改。

const export OuterTemp = () => {
  var myTemp = "myTemp";
  function myFunction() {
    console.log("myFunction()")
  }
}

您可以导入它们并调用其中的任何函数

import OuterTemp from '~~~/OuterTemp'

它将按预期工作

编辑

根据我的理解，myFunction将被视为私有功能，无法在外部访问。即使在传统的JavaScript方法中，您也无法在函数包装器之外访问它。

如果您打算创建一个具有n个功能且必须在另一个文件中访问的外部库，则必须按以下方式进行操作

  export var myTemp = "myTemp";

  export var myVar = 5;
  export function myFunction(){
    console.log("myFunction()");
  }
  export function myFunction1() {
    console.log("myFunction()")
  }
  export myFunction2() {
    console.log("myFunction()")
  }
  export myFunction3() {
    console.log("myFunction()")
  }

您可以像这样使用

import * as outerTemp from './myScript';

outerTemp.myFunction();

我如何在ReactJS上导入普通JavaScript

例如

3 个答案:

编辑