J'essaie de faire un effet de machine à écrire dans un composant réactif. Je passe dans un tableau de cordes et essayez de les rendre de caractère par caractère après un intervalle (en utilisant SettimeOut). Voici mon code pour que
state = {
typeColor: {
color: "blue"
},
typed: ""
};
componentDidMount() {
this.props.typewriter.map(string => {
console.log("1", string);
return this.stringChecker(string);
});
}
typeWriter(string) {
if (string.length === 0) {
return;
}
console.log("3", string);
this.setState((state, props) => ({ typed: state.typed.concat(string[0]) }));
console.log(this.state.typed);
setTimeout(() => this.typeWriter(string.slice(1)), 120);
}
stringChecker(string) {
console.log("2", string);
if (string === "Qurram") {
this.setState({ typeColor: { color: "blue" } });
} else {
this.setState({ typeColor: { color: "pink" } });
}
this.typeWriter(string);
}
render() {
return <div style={this.state.typeColor}>{this.state.typed}</div>;
}
}
3 Réponses :
Vous pouvez simplement utiliser p> useEffect () code> Crochet qui augmentera une partie visible du texte (stockée dans l'état du composant) après chaque rendu (avec délai aléatoire) jusqu'à ce que tout le texte soit sorti. Démo Live-Démo de ce concept Vous pouvez trouver ci-dessous: p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
La logique de frappe est bonne, cependant, note que Settimeout est asynchrone, de sorte qu'il n'attend pas que l'ensemble du mot soit saisi avant de passer à la suivante. La solution consiste à fabriquer l'ensemble du flux de frappe, de sorte que vous ne basculez pas sur le mot suivant avant que le précédent a été saisi.
Voici la démonstration de la boîte à sable: https://codesandbox.io/s/boring-greider-824nd p>
Le changement principal est celui-ci: P>
if (string.length === 0) {
words = words.slice(1);
words[0] && this.typeWord(words[0], words);
}
Yup, Voici une autre approche utilisant https://codesandbox.io/s/youthful -DAVINCI-D5BK5? FONTSIZE = 14 & HIDENAVIGATION = 1 & THEME = Dark
Aussi ... Si vous voulez simplement le faire en cours d'exécution, j'ai fait un type de type, une bibliothèque de dactylographie JS et une version de composante réagissante de celui-ci. Si c'est utile, vérifiez-le:
Settimeout () Peut être difficile lorsque vous travaillez avec des tâches qui doivent exécuter de manière synchrone (comme un effet de saisie).
async / attendre . J'ai fait la méthode méthode de la machine à écrire ASYNC, et elle ne reviendra ainsi qu'une fois que tous les caractères de la chaîne ont été saisis. Après cela, la chaîne suivante sera autorisée à taper. Pour que cela fonctionne, stringchecker doit également être asynchronisé. Vérifiez-le et laissez-moi savoir si quelque chose est déroutant.
Pouvez-vous donc un exemple de Stackblitz pour la question.
@AkhilarVind j'ai ajouté Sandbox Link