Javascript 如何将函数从另一个文件导入reactjs组件？

我有一个main.js文件

function convertToFahrenheit(param) {
    return param * 2 + 30;
}

function convertToCelsius(param) {
    return (param - 32) * 1.8;
}

我已经将它导入到我的组件中，但它似乎不起作用，我还检查了devtool的路径，该文件完全存在

import React from "react";
import TemperatureInput from "./TemperatureInput.js";
import "../assets/js/main.js";

class Caculator extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            type: "c",
            temperature: 0,
        };
    }
    handleCelsiusChange = (value) => {
        this.setState({
            temperature: value,
            type: "c",
        });
    };
    handleFahrenheitChange = (value) => {
        this.setState({
            temperature: value,
            type: "f",
        });
    }
    render() {
        let valueCelsius = this.state.type === 'c' ? this.state.temperature : convertToCelsius(this.setState.temperature);
        return (
            <div id="caculator">
                <TemperatureInput type={this.state.type} changeInput = {this.handleCelsiusChange}/>
                <TemperatureInput type={this.state.type} changeInput = {this.handleFahrenheitChange} />
            </div>
        );
    }
}

export default Caculator;

如何在我的组件中使用此功能？

试试这个

export function convertToFahrenheit(param) {
    return param * 2 + 30;
}

export function convertToCelsius(param) {
    return (param - 32) * 1.8;
}

然后在你的组件中

---

从“./assets/js/main.js”导入{convertToCelsius}
在main.js中使用
export

export function convertToFahrenheit(param) {
    return param * 2 + 30;
}

并命名为import

export function convertToFahrenheit(param) {
    return param * 2 + 30;
}

export function convertToCelsius(param) {
    return (param - 32) * 1.8;
}

//imported in your needed file
import {convertToFahrenheit, convertToCelsius} from '../assets/js/main.js'


从“./assets/js/main.js”导入{convertToFahrenheit}
您需要导出main.js中的函数，然后使用正确的语法将它们导入组件。试试这个：

export function convertToFahrenheit(param) {
    return param * 2 + 30;
}

export function convertToCelsius(param) {
    return (param - 32) * 1.8;
}

然后，对于导入，请执行以下操作

import React from "react";
import TemperatureInput from "./TemperatureInput.js";
import { convertToFahrenheit, convertToCelsius } from "../assets/js/main.js";


本网站详细介绍了该功能：
通过使用ES6
import
和
export
语法，您可以通过多种方式获得该功能

简而言之，
export
允许您一次导出多个表达式，而
export default
只允许导出一个表达式。另外，对于那些由
导出
公开的内容，当
导入
时需要括号，而
导出默认值
不需要括号

选项1:
按命名导入导出

export function convertToFahrenheit(param) {
    return param * 2 + 30;
}

export function convertToCelsius(param) {
    return (param - 32) * 1.8;
}

//imported in your needed file
import {convertToFahrenheit, convertToCelsius} from '../assets/js/main.js'


选项2：使用
导出
按名称导入的另一种方法

function convertToFahrenheit(param) {
    return param * 2 + 30;
}

function convertToCelsius(param) {
    return (param - 32) * 1.8;
}

export {convertToFahrenheit, convertToCelsius}

//imported in your needed file
import {convertToFahrenheit, convertToCelsius} from '../assets/js/main.js'


选项3:
导出一个表达式（函数、类、对象、数组…）的默认值

//demo for exporting 1 function

export default function convertToFahrenheit(param) {
    return param * 2 + 30;
}

//imported in your needed file, the name can be customised by you.
import myOwnFunc from '../assets/js/main.js'