Форматирование кода с тегом в React и JSX

Я пытаюсь использовать тег pre внутри JSX.Когда вы используете тег pre в JSX, он вообще не форматируется. Почему? Чтобы использовать тег pre, мне нужно сделать что-то вроде этого:

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

почему?

7
html javascript react-jsx reactjs

2 ответов

использовать шаблон литералы

шаблон литералы разрешить использование многострочных строк, которые сохраняют начальные/конечные пробелы и новые строки.

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>

<div id="pre"></div>

<pre>
            Hello   ,
            World   .
</pre>
28

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> tag, вы можете использовать литерал с тегами шаблона для возврата правильного вывода для вас. Просто предоставьте ему переменные для вывода!

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

8