格式化代码 React和JSX中的标签

Question

我正在尝试在JSX内部使用pre标签。当您在JSX中使用pre标签时，它根本不格式化。为什么？为了使用pre标签，我需要执行以下操作：

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

为什么？

Answer 1

使用模板文字

模板文字允许使用多行字符串，以保留前导/尾随空格和换行符。

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>