Question

我想为执行此操作的函数创建文件（function.js）：

let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }

然后我想将其添加到（this.js）

import function from "./function";
class Example extends Component {
    state = {
        test
    };
    render() {
        function()
    return (
        <div>
            <h1>{this.state.test.sample[i].name}</h1>
        </div>

Answer 1

您可以执行以下操作：

function.js

const doSomething = function() {
let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }

}

export default doSomething;

App.js（例如）：

import doSomething from "./function";

class Example extends Component {
    state = {
        test
    };
    render() {
        doSomething()
    return (
        <div>
            <h1>{this.state.test.sample[i].name}</h1>
        </div>
     )

Answer 2

function关键字是保留的标识符。

在浏览器上，您需要某种捆绑工具，该工具将允许从js模块进行import。在服务器上，您只能require(path/to/file)。建议您使用create-react-app进行全功能的react设置。基本设置包含有关JS模块系统的示例（请参见下面的文档）。

作为回报，您的文件需要导出要使用的符号。

在包含a.js和b.js的目录中，其中b要从a导入符号

// file a.js
export function myFunction () {}


// file b.js
import { myFunction } from "./a";

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://github.com/facebook/create-react-app

Answer 3

function.js具有下面的代码

const funcName = function() {
  let i = 0;
  if (this === that) {
    i = 0;
  } else {
    i = 1;
  }
}

export default funcName;

您可以在this.js中使用它，如下所示-

import funcName from "./function";

class Example extends Component {
    state = {
        test
    };
    render() {
        funcName()
    return (
        <div>
            <h1>{this.state.test.sample[i].name}</h1>
        </div>
     )

Answer 4

像这样在function.js中导出函数

export function funcName() {
   //function stuff
   let i = 1;
   return i;
}

导入将

import { funcName } from './function';

console.log(`value of i is ${funcName()}`);

Answer 5

有多种方法可以做到这一点。

1st

如果要在该文件中创建多个功能

export const one = () => {
let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }
}

export const two = () => {
let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }
}

然后导入并使用它

import { 
one, 
two 
} from "./functions"

第二

您可以使用export defualt

export default = function() {
  let i = 0;
  if (this === that) {
    i = 0;
  } else {
    i = 1;
  }
}

然后通过执行此操作

import function from "./function";

如何在React中使用另一个文件中的函数？

5 个答案:

1st

第二