我正在尝试在 JSX 中使用 pre 标记。当您在 JSX 中使用 pre 标记时，它根本没有格式化。为什么？为了使用 pre 标签，我需要做这样的事情：
const someCodeIWantToFormat = "var foo = 1"
const preBlock = { __html: "<pre>" + pythonCode + "</pre>" };
return(
<div dangerouslySetInnerHTML={ preBlock } />;
)
为什么？
在 React 和 JSX 中使用 <pre> 标签格式化代码
IT技术
javascript
html
reactjs
react-jsx
2021-04-14 23:52:57
5个回答
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>也许在这个特定的实现中不需要，但知道它也可以在括号内进行函数调用和其他操作可能会很好。
标记的模板文字
如果您不想为<pre>标记手动添加换行符、分号和其他代码格式，您可以使用标记模板文字为您返回正确的输出。只需为它提供要输出的变量即可！
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：这不是很棒吗！？
在 jsx 中格式化的一个好方法是使用String.raw模板文字，然后使用prejsx 中的标签。如果您正在执行此类操作，这有助于消除任何逃逸问题。
我在 React 中为一个 starwars api 项目做了这个。这是我的标题。
const Header = () => {
var title = String.raw`
___| |_ ___ _____ __ _ ___ _____ ___
/ __| __|/ _ | __/ \ \ /\ / // _ | __// __|
\__ | |_ (_| | | \ V V / (_| | | \__ |
|___/\__|\__,_|_| \_/\_/ \__,_|_| |___/
`;
return (
<div>
<pre> {title} </pre>
</div>
)
};
export default Header;
利用
<pre>
{JSON.stringify(yourdataobject, null, 2)}
</pre>
渲染对象
试试这个
<Row key={i} className="question">
<Col xs="12" className="article" >
Article {article + 1})
</Col>
<Col xs="12">
<pre>{`${v.QuestionDesc}`}</pre>
</Col>
</Row>
希望得到帮助。