Plusieurs composants, mais seulement le premier rendu

J'essaie de créer une application ToDo simple en utilisant Ractive.js et Redux, mais j'ai rencontré un problème avec le rendu de plusieurs composants sur ma page.Plusieurs composants, mais seulement le premier rendu

code Javascript:

import Ractive from 'ractive'; 
import template from './Home.html'; 
import './Home.less'; 

import { AddToDoForm, ToDoList } from '../'; 

export default Ractive.extend({ 
    template, 
    data: { 
    message: 'This is the home page.', 
    }, 
    components: { 
    AddToDoForm, 
    ToDoList 
    } 
});

HTML du composant:

<AddToDoForm store={{store}} /> 
<ToDoList store={{store}} />

Mais seul le premier composant est rendu. Le paramètre store que je passe est le magasin Redux, mais il ne fonctionne pas même sans lui.

Source

2017-08-17 Dominik Havlicek

Juste en regardant le code, rien ne se démarque. Mais il y a quelques points vagues, comme comment 'Home.html' et' Home.less' sont transformés, comment 'AddToDoForm' et' ToDoList' sont importés, d'où 'store' vient-il. Peut-être serait-il mieux si vous fournissiez une démo, ou expliquiez comment les autres parties entrent en jeu. De plus, une erreur de console (le cas échéant) serait bénéfique. Et mentionner l'outillage serait génial. – Joseph

Vous pouvez également vérifier si 'ToDoList' est en fait une définition de composant. Lorsque Ractive ne reconnaît pas un composant, il restitue généralement la balise telle quelle et vide sur le DOM (qui n'apparaît comme rien). Si "" apparaît comme "", alors cela peut être le cas. – Joseph

@Joseph J'utilise Webpack pour tout. Le magasin provient du composant de l'application racine, où il est initialisé. Demo serait difficile à fournir pour tout expliquer dans ce cas, mais je peux essayer demain quand je suis au PC le code est. Je vais vérifier l'importation de 'ToDoList' demain aussi, peut-être que vous êtes sur quelque chose là-bas. –

Je voudrais ajouter à vérifier les valeurs par défaut en tant que

... 
components:{ 
    AddToDoForm: AddToDoForm, 
    ToDoList: ToDoList 
} 
...

Exemples de syntaxe (answer/31096635)

Source

2017-10-31 21:14:09 nolochemical

Plusieurs composants, mais seulement le premier rendu

Répondre

Questions connexes