Javascript 在 React 和 JSX 中使用 <pre> 标签格式化代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37847885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Formatting code with <pre> tag in React and JSX
提问by user2465134
I am trying to use the pre tag inside of JSX.When you use the pre tag in JSX, it doesn't format at all. Why? In order to use the pre tag I need to do something like this:
我正在尝试在 JSX 中使用 pre 标记。当您在 JSX 中使用 pre 标记时，它根本没有格式化。为什么？为了使用 pre 标签，我需要做这样的事情：
const someCodeIWantToFormat = "var foo = 1"
const preBlock = { __html: "<pre>" + pythonCode + "</pre>" };
return(
<div dangerouslySetInnerHTML={ preBlock } />;
)
Why?
为什么？
回答by gfullam
Use template literals
使用模板文字
Template literalsallow the use of multi-line strings which preserve leading/trailing white-space and new lines.
模板文字允许使用多行字符串，保留前导/尾随空格和新行。
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>回答by Chris
Gfullamhas a posted a great answer.
Gfullam发布了一个很好的答案。
I'll expand it a bit and provide some alternative solutions. Most of these are probablyoverkill for your particularcase. However I believe you (and potential future readers) might find these useful. Note that these require ES6.
我将对其进行一些扩展并提供一些替代解决方案。对于您的特定情况，其中大多数可能是矫枉过正。但是我相信您（和潜在的未来读者）可能会发现这些很有用。请注意，这些需要 ES6。
Template Literal Expression
模板文字表达
Since you already have your code stored in a variable, you could use a Template Literal Expression. This is might be preferable if you have many variables or if you want to control your output.
由于您已经将代码存储在变量中，因此您可以使用模板文字表达式。如果您有很多变量或想要控制输出，这可能更可取。
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>Perhaps not needed in this particular implementation, but it might be good to know that also can do function calls and other operations within the brackets.
也许在这个特定的实现中不需要，但知道它也可以在括号内进行函数调用和其他操作可能会很好。
Tagged Template Literals
标记模板文字
If you don't want to manually add line-breaks, semi-colons and other code formatting for your <pre>tag, you could use a Tagged Template Literal to return the right output for you. Just provide it with the variables to output!
如果您不想为<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: Isn't this awesome!?
PS：这不是很棒吗！？
回答by Gerard
A good way to format in jsx is to use String.rawwith a template literal and then the pretag in your jsx. This helps eliminate any escape issues if you're doing something like this.
在 jsx 中格式化的一个好方法是使用String.raw模板文字，然后使用prejsx 中的标签。如果您正在做这样的事情，这有助于消除任何逃逸问题。
I did this for a starwars api project in React. This was my header.
我在 React 中为一个 starwars api 项目做了这个。这是我的标题。
const Header = () => {
var title = String.raw`
___| |_ ___ _____ __ _ ___ _____ ___
/ __| __|/ _ | __/ \ \ /\ / // _ | __// __|
\__ | |_ (_| | | \ V V / (_| | | \__ |
|___/\__|\__,_|_| \_/\_/ \__,_|_| |___/
`;
return (
<div>
<pre> {title} </pre>
</div>
)
};
export default Header;
回答by Andris Laduzans
use
用
<pre>
{JSON.stringify(yourdataobject, null, 2)}
</pre>
to render objects
渲染对象
回答by superup
Try this
尝试这个
<Row key={i} className="question">
<Col xs="12" className="article" >
Article {article + 1})
</Col>
<Col xs="12">
<pre>{`${v.QuestionDesc}`}</pre>
</Col>
</Row>
Hope for help.
希望得到帮助。
