如何将 js 文件导入 React 组件？答案

【问题标题】：How to import js file to React component?如何将 js 文件导入 React 组件？
【发布时间】：2021-03-23 09:49:58
【问题描述】：

我的 Home.js React 组件位于 ./components/Home.js 和 ratingStars.js 文件位于 ./js/ratingStars.js。

我想在我的 Home 组件中使用来自 ratingStars.js 的脚本，但使用 <script src="js/ratingStars.js"></script> 不起作用。如何将 js 文件导入 React 组件？

这里是ratingStars.js：

"use strict"

const ratings = document.querySelectorAll('.rating');

if(ratings.length > 0){
    initRatings();
}

//main foo
function initRatings(){
    let ratingActive, ratingValue;
    for (let index = 0; index < ratings.length; index++) {
        const rating = ratings[index];
        initRating(rating);
    }
    //foo for accurance rating
    function initRating(rating){
        initRatingVars(rating);

        setRatingActiveWidth();

        if (rating.classList.contains('rating_set')){
            setRating(rating);
        }
    }
    //init vars
    function initRatingVars(rating) {
        ratingActive = rating.querySelector('.rating_active');
        ratingValue = rating.querySelector('.rating_value');
    }

    //change rating width
    function setRatingActiveWidth(index = ratingValue.innerHTML) {
        const ratingActiveWidth = index / 0.05;
        ratingActive.style.width = `${ratingActiveWidth}%`;
    }
}

【问题讨论】：

标签： javascript html reactjs import

【解决方案1】：

您可以使用 import 语句并以这种方式调用其中的组件。
import <Name of what you want to import> from '<Relative Path>'

【讨论】：

【解决方案2】：

你可以像这样导入 React 组件

import Home  from './components/Home';

import ratingStars  from './components/ratingStars';

【讨论】：

【解决方案3】：

假设你的 js 文件 - ratingStars.js 看起来是这样的：

export const ratingStars = () => {...};

那么你应该将它导入你的 React 组件 (Home.js) 所以：

import {ratingStarts} from '../js/raintgStars'

【讨论】：

【解决方案4】：

你可以试试<script src="./js/ratingStars.js"></script>

或者通常在 React 中，我们可以如下导入 js 文件，

import ratingStars from './js/ratingStars.js'

【讨论】：

那么，我现在如何在我的 Home.js 中使用这个导入的 ratingStars？这个导入只是在 VS Code 中隐藏。
当你没有在你的代码中使用'ratingStars'时它会被遮住，开始使用它，它会变成彩色的。