首頁猿問使用 JSX...

使用 JSX 將代碼渲染到頁面，同時保留換行符

JavaScript

翻閱古今 2022-01-01 20:34:35

我正在嘗試使用一個包含大量代碼的字段，其中包含換行符和制表符。我希望它呈現并保留制表符和換行符?；旧衔蚁Ｍ谖逸敵鰰r看起來像在堆棧溢出中格式化的代碼。當我使用字符串文字時，它不會保留制表符和換行符。下面是我的代碼import React, { useContext } from 'react'import FunctionalContext from '../../context/functional/functionalContext';const FunctionalComponent = () => { const functionalContext = useContext(FunctionalContext); return ( <div> <h1>Classes</h1> <h2>Classes</h2> <code>{` import React from 'react' constructor() { super() `} </code> </div> )}export default FunctionalComponent

查看完整描述

1 回答

慕虎7371278

TA貢獻1802條經驗獲得超4個贊

code默認情況下，該元素未預先格式化。您可以將其中一種white-space樣式應用于它，也可以將其放入pre元素中。

不過，我認為您會很難以有用的方式呈現選項卡。在輸出之前，您可能希望將它們擴展到作者使用的任何制表位。

使用示例<pre><code>...</code></pre>：

const Example = () => {

const code =

import React from 'react';

class Foo extends React.Component {

constructor() {

super();

}

}`;

return (

<div>

<h1>Classes</h1>

<h2>Classes</h2>

</div>

);

}

ReactDOM.render(<Example/>, document.getElementById("root"));

使用white-space樣式的示例：

const Example = () => {

const code =

import React from 'react';

class Foo extends React.Component {

constructor() {

super();

}

}`;

return (

<div>

<h1>Classes</h1>

<h2>Classes</h2>

</div>

);

}

ReactDOM.render(<Example/>, document.getElementById("root"));

.block {

display: block;

white-space: pre;

}

我也包括在內，display: block因為默認情況下code是內聯的。

反對回復 2022-01-01

1 回答
0 關注
294 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 JSX 將代碼渲染到頁面，同時保留換行符

使用 JSX 將代碼渲染到頁面，同時保留換行符

1 回答

添加回答

使用 JSX 將代碼渲染到頁面，同時保留換行符

使用 JSX 將代碼渲染到頁面，同時保留換行符