如何将 function 从另一个文件导入 reactjs 组件？

Question

I have a main.js file

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

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

I have imported it into my component but it doesn't seem to work, I have also checked the path from devtool and this file completely exists

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;

what i get is

'convertToCelsius' is not defined  no-undef

How can I use this function in my component?

Answer 1

Try this

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

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

and then in your component

import { convertToCelsius } from "../assets/js/main.js";

Answer 2

You need to export the functions in main.js and then use the correct syntax to import them to the component. Try this:

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

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

Then for importing do the following

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

This site goes into more detail about it: https://www.geeksforgeeks.org/reactjs-importing-exporting/

Answer 3

Use export in main.js

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

and named import

import {convertToFahrenheit} from "../assets/js/main.js";

Answer 4

There are multiple ways you can get function by using ES6 import and export syntax

In short, export allows you to export multiple expressions at a time while export default only allows one expression to be exported. Also, for those things exposed by export , brackets are needed when import while export default doesn't.

Option 1: export by named 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'

Option 2: another way using export by name import

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'

Option 3: export default for one expression (function, class, object, array...)

//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'