我正在尝试在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>