Importer un travail fichier javascript dans Svelte

Question 1

Je suis en train de construire une application en Svelte et je vais essayer d'y ajouter un écrit précédemment .js fichier. J'ai essayé de l'importer dans le main.js fichier, mais me donne une erreur: Cannot read properties of null (reading 'offsetHeight') C'est le .js fichier:

[...]
function colorSubheadings() {
    // Replace subheading background colors
    var redStart = 255;
    var greenStart = 255;
    var blueStart = 255;
    var redEnd = 249;
    var greenEnd = 250;
    var blueEnd = 251;

    var redDiff = redEnd - redStart;
    var greenDiff = greenEnd - greenStart;
    var blueDiff = blueEnd - blueStart;

    var page = document.querySelector('.page');
    var pageHeight = page.offsetHeight;

    var subheadings = document.getElementsByClassName('.chapter');
    for (var i = 0; i < subheadings.length; i++) {
        // Get the position relative to .page
        var span = subheadings[i].querySelector('span');
        var factor = span.offsetTop / pageHeight;

        var r = Math.floor(redDiff * factor + redStart);
        var g = Math.floor(greenDiff * factor + greenStart);
        var b = Math.floor(blueDiff * factor + blueStart);
        var color = 'rgb(' + r + ',' + g + ',' + b + ')';

        // Color background based on position
        span.style.backgroundColor = color;
        span.style.boxShadow = '11px 0 0 ' + color + ', -13px 0 0 ' + color;
    }
}
[...]

Et c'est le .svelte fichier:

<script>
 //some functions
</script>
<div class="page">
[...]
<div class="chapter-sidebar">
    <div class="sidebar js-sidebar">
        <div class="sidebar__wrapper">
            <ul class="sidebar__list">
            {#each files as { file } (file.name)}
                <li class="sidebar__list-item">
                    <a class="sidebar__link" href="#temp">{file.name.split('.').slice(0, -1).join('.')}</a>
                </li>
            {/each}
            </ul>
        </div>
    </div>

Dans le .svelte fichier il y a une barre de navigation latérale, juste comme cela. La vanille html, il fonctionne parfaitement, mais avec svelte il y a quelques bugs, comme la barre de navigation n'est pas "stick" dans un endroit: si je scroll vers le bas, il reste dans la partie supérieure de la page, insted de rester dans un particuar la position de l'écran "à la suite" de l'utilisateur de faire défiler. Alors, que puis-je faire pour utiliser cette .js fichier dans mon svelte projet? J'ai aussi essayé cette solution, mais ça n'a pas fonctionné pour moi. Grâce à advace.

Question 2

Où est la colorSubheadings() fonction appelée?
(Je vois var subheadings = document.getElementsByClassName('.chapter') mais pas d'éléments avec la classe "chapitre" dans le Svelte fichier)

Je vous suggère d'essayer

l'importation de la .fichier js dans le index.html dans yourproject/puplic dossier après l' <script src="/build/bundle.js"></script> (dans le cas où la fonction est appelée à l'intérieur de la même .js fichier)
l'exécution de la fonction à l'intérieur de onMount dans le .svelte composant (.js fichier à l'intérieur yourproject/src dossier avec fonction exportée export colorSubheadings() {...})

    import {onMount} from 'svelte'
    import {colorSubheadings} from './xy.js'
        
    onMount(()=> {
         colorSubheadings()
    })

Question 3

Vous avez besoin d'exporter la fonction dans votre fichier js avant, vous pouvez l'importer dans votre .svelte fichier (ou un autre fichier JS).

export function colorSubheadings() {
...
}

Corrl · Answer 1 · 2021-11-22T22:11:06

Où est la colorSubheadings() fonction appelée?
(Je vois var subheadings = document.getElementsByClassName('.chapter') mais pas d'éléments avec la classe "chapitre" dans le Svelte fichier)

Je vous suggère d'essayer

l'importation de la .fichier js dans le index.html dans yourproject/puplic dossier après l' <script src="/build/bundle.js"></script> (dans le cas où la fonction est appelée à l'intérieur de la même .js fichier)
l'exécution de la fonction à l'intérieur de onMount dans le .svelte composant (.js fichier à l'intérieur yourproject/src dossier avec fonction exportée export colorSubheadings() {...})

    import {onMount} from 'svelte'
    import {colorSubheadings} from './xy.js'
        
    onMount(()=> {
         colorSubheadings()
    })

justintimeza · Answer 2 · 2021-11-23T16:27:24

Vous avez besoin d'exporter la fonction dans votre fichier js avant, vous pouvez l'importer dans votre .svelte fichier (ou un autre fichier JS).

export function colorSubheadings() {
...
}

Importer un travail fichier javascript dans Svelte

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie