javascript - 如何自动换行标签？

Question

我试图在我的 React 应用程序中放置一个代码片段，奇怪的是无论我做什么，片段中都没有换行符。这是我的代码：

import React from 'react';
import './Hello.scss';

const Hello = () => {
    return (
        <>
            <div>
                Hello world!
            </div>
            <pre>
                npx create-react-app my-app
                cd my-app
                npm start
            </pre>
        </>
    )
}

export default Hello;

pre {
    font-size: 16px;
    overflow: auto;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

我期待pre标签中的内容

npx create-react-app my-app
cd my-app
npm start

相反，我得到：

npx create-react-app my-app cd my-app npm start

知道我该怎么做pre吗？

标签： javascripthtmlcssreactjs

Answer 1

children您需要通过使用 string as或在行尾强制来显式提供换行符{'\n'}。

const Hello = () => {
    return (
        <React.Fragment>
            <div>
                Hello world!
            </div>
            <pre children={`npx create-react-app my-app
cd my-app
npm start
`} />
<pre>
npx create-react-app my-app{'\n'}
cd my-app{'\n'}
npm start{'\n'}
</pre>
        </React.Fragment>
    )
}

ReactDOM.render(<Hello />, document.getElementById('hello'))

pre {
  font-size: 16px;
  overflow: auto;
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="hello"></div>