web-dev-qa-db-fra.com

Formatage du code avec la balise <pre> dans React et JSX

J'essaie d'utiliser la balise pre à l'intérieur de JSX.Lorsque vous utilisez la balise pre dans JSX, elle ne se formate pas du tout. Pourquoi? Pour utiliser la balise pre, je dois faire quelque chose comme ceci:

const someCodeIWantToFormat = "var foo = 1"
const preBlock = { __html: "<pre>" + pythonCode + "</pre>" };
return(
  <div dangerouslySetInnerHTML={ preBlock } />;
)

Pourquoi?

javascripthtmlreactjsreact-jsx
22
user2465134

Utiliser des littéraux de modèle

Littéraux de modèle permet l'utilisation de chaînes multi-lignes qui préservent les espaces blancs de début/fin et les nouvelles lignes.

class SomeComponent extends React.Component {
   render() {
        return (
          <pre>{`
            Hello   ,   
            World   .
          `}</pre>
        )
    }
}

class SomeComponent extends React.Component {
   render() {
        return (
          <pre>{`
            Hello   ,   
            World   .
          `}</pre>
        )
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('pre')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>

<!-- The content rendered into this tag should match the content below. -->
<div id="pre"></div>

<pre>
            Hello   ,
            World   .
</pre>
47
gfullam

Gfullam a publié une excellente réponse.

Je vais l'étendre un peu et proposer des solutions alternatives. La plupart d'entre eux sont probablement exagéré pour votre particulier cas. Cependant, je pense que vous (et les futurs lecteurs potentiels) pourriez les trouver utiles. Notez que ceux-ci nécessitent ES6.

Expression littérale du modèle

Étant donné que votre code est déjà stocké dans une variable, vous pouvez utiliser une expression littérale de modèle. Cela peut être préférable si vous avez de nombreuses variables ou si vous souhaitez contrôler votre sortie.

class SomeComponent extends React.Component {
   render() {
     var foo = 1;
     var bar = '"a b   c"';
        return (
          <pre>{`
            var foo = ${foo};
            var bar = ${bar};
          `}</pre>
        )
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('content')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="content"></div>

Peut-être pas nécessaire dans cette implémentation particulière, mais il pourrait être bon de savoir qu'il peut également effectuer des appels de fonction et d'autres opérations entre crochets.

CodePen

Littéraux de modèle balisés

Si vous ne souhaitez pas ajouter manuellement des sauts de ligne, des points-virgules et d'autres formats de code pour votre <pre> tag, vous pouvez utiliser un littéral de modèle balisé pour renvoyer la sortie qui vous convient. Fournissez-lui simplement les variables à afficher!

class SomeComponent extends React.Component {
  pre(strings, variables) {
    return variables.map((v, i) => {
      return `var ${v.name} = ${v.value};
`
    })
  } 
  
  render() {
     var variables = [{name: "foo", value: 1},{name: "bar", value: '"a b   c"'}];
     return <pre>{this.pre`${variables}`}</pre>;
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('content')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="content"></div>

PS: N'est-ce pas génial!?

CodePen

10
Chris

Un bon moyen de formater en jsx est d'utiliser String.raw avec un modèle littéral puis la balise pre dans votre jsx. Cela permet d'éliminer tout problème d'échappement si vous faites quelque chose comme ça.

Je l'ai fait pour un projet d'api starwars dans React. C'était ma tête.

    const Header = () => {

        var title = String.raw`
             ___| |_  ___  _____ __      _  ___  _____ ___
            / __| __|/ _  |  __/ \ \ /\ / // _  |  __// __|
            \__ | |_  (_| | |     \ V  V /  (_| | |   \__ |
            |___/\__|\__,_|_|      \_/\_/  \__,_|_|   |___/
        `;
        return (
            <div>
                <pre> {title} </pre>
            </div>
        )
    };

    export default Header;
3
Gerard