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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

为什么？

回答：

回答：

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

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>

以上是 格式化代码 React和JSX中的标签 的全部内容， 来源链接： utcz.com/qa/410770.html

回到顶部