1
votes

Rendu d'espaces blancs à partir de chaînes de modèle

Si j'ai une chaîne de modèle avec des espaces, dites

<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="test"></div>
  <script type="text/babel">

    var firstName = "Somebody"
    var product = "something"


    const element = (`
    Hello ${firstName},

    Thanks for ordering ${product}.

   Your order has shipped.
`);

document.getElementById('test').innerHTML = element;    

</script>
</body>
</html>```

Expected:

Hello Somebody, 

Thanks for ordering something. 

Your order has shipped.


Actual results:

Hello Somebody, Thanks for ordering something. Your order has shipped.

Comment puis-je rendre cela au format HTML, y compris les espaces?

J'ai essayé d'utiliser innerHTML, mais cela donne

Hello Somebody, Thanks for ordering something. Your order has shipped.

(`${firstName},

Thanks for ordering ${product1}.

Your order has shipped.`);

javascript html whitespace

1 commentaires

Copie possible de Comment créer une nouvelle ligne en Javascript? < / a>

3 Réponses :

1
votes

HTML réduira les espaces par défaut. Vous pouvez soit conserver les espaces en utilisant css white-space: pre ou remplacez les caractères de nouvelle ligne par des balises qui rendront les sauts de ligne, comme ceci:

document.getElementById('test').innerHTML = element.replace(/\n/g, '<br>')

0 commentaires

0
votes

Vous pouvez essayer la balise pre au lieu de la balise div:

<pre id="test"></pre>

0 commentaires

0
votes

Puisque vous utilisez babel, pourquoi n'écrivez-vous pas du HTML à l'intérieur des éléments const ?

const element = (
<div>
    <h3>Hello ${firstName}<h3>
    <p>Thanks for ordering ${product}</p>
    <p>Your order has shipped.</p>
</div>
);

Pour info, vous devez d'abord envelopper un div

1 commentaires

J'apprécie les suggestions, mais je n'essaye pas de trouver une alternative à ce que j'ai décrit. Je suis nouveau dans React, donc j'essaie de comprendre pourquoi un livre enseignerait des choses en utilisant uniquement la console comme sortie pour le code, alors que l'idée est d'apprendre comment accéder au codage d'application d'une seule page. J'essaie d'utiliser l'un des exemples sortis à l'origine sur la console pour le rendre à l'écran.