web-dev-qa-db-ja.com

ReactおよびJSXの<pre>タグを使用したコードのフォーマット

JSX内でpreタグを使用しようとしています。JSXでpreタグを使用すると、まったくフォーマットされません。どうして？ preタグを使用するには、次のようにする必要があります。

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

どうして？

javascripthtmlreactjsreact-jsx
22
user2465134

テンプレートリテラルを使用する

テンプレートリテラル は、先頭/末尾の空白と改行を保持する複数行の文字列の使用を許可します。

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には素晴らしい答えが掲載されています。

少し拡張して、いくつかの代替ソリューションを提供します。これらのほとんどは多分あなたの特定の場合は過剰です。しかし、私はあなた（そして将来の読者）がこれらを役に立つと思うかもしれません。 これらにはES6が必要であることに注意してください。

テンプレートリテラル表現

コードは既に変数に保存されているため、テンプレートリテラル式を使用できます。これは、多くの変数がある場合、または出力を制御する場合に適しています。

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>

この特定の実装ではおそらく必要ありませんが、括弧内で関数呼び出しやその他の操作を実行できることを知っておくとよいでしょう。

CodePen

タグ付きテンプレートリテラル

<pre>タグに改行、セミコロン、その他のコードフォーマットを手動で追加したくない場合は、Tagged Template Literalを使用して適切な出力を返すことができます。出力する変数を指定するだけです！

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：これはすごいですね！？

CodePen

10
Chris

Jsxでフォーマットする良い方法は、String.rawにテンプレートリテラルを追加し、jsxのpreタグを追加します。これは、このようなことをしている場合、エスケープの問題を排除するのに役立ちます。

Reactのstarwars APIプロジェクトでこれを行いました。これが私のヘッダーでした。

    const Header = () => {

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

    export default Header;
3
Gerard