如何將 function 從另一個文件導入 reactjs 組件？

Question

我有一個 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;

我得到的是

'convertToCelsius' is not defined  no-undef

如何在我的組件中使用這個 function？

Answer 1

嘗試這個

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

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

然后在你的組件中

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

Answer 2

您需要導出 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";

這個網站更詳細地介紹了它： https://www.geeksforgeeks.org/reactjs-importing-exporting/

Answer 3

在 main.js 中使用export

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

並命名為導入

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

Answer 4

有多種方法可以通過使用 ES6 import和export語法來獲取 function

簡而言之， export允許您一次導出多個表達式，而export default只允許導出一個表達式。 此外，對於那些由export暴露的東西， import時需要括號，而export default不需要。

選項 1：通過命名導入export

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：另一種使用按名稱export的方式導入

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： export default （函數、class、object、數組...）

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