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

Question

我有 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}%`;
    }
}

Answer 1

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

Answer 2

你可以像这样导入 React 组件

 import Home from './components/Home';

 import ratingStars from './components/ratingStars';

Answer 3

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

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

那么你应该在你的 React 组件（ Home.js ）中导入它：

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

Answer 4

您可以尝试使用<script src="./js/ratingStars.js"></script>

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

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