如何在react中使用另一个文件中的函数?

IT技术 javascript reactjs
2021-05-17 13:50:37

我想为执行此操作的函数创建一个文件 (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>
4个回答

您可以执行以下操作:

函数.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>
     )

有多种方法可以做到。

第一

如果您要在该文件中创建多个函数

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";

function关键字是一个保留标识符。

在浏览器上,您需要某种捆绑工具,该工具将允许import从 js module。在服务器上,您只需require(path/to/file). 我建议您查看create-react-app功能齐全的react设置。基本设置包含有关 JS module系统的示例(请参阅下面的文档)。

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

在同一个目录中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

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