反应功能 <br> 在此 <p> 中不起作用

Question

我已经搜索并尝试了很多，但在这里换行没有任何效果。这是 React 函数

我想这确实是个基本问题，因为我对此很陌生，但请多多指教。有人建议这样做：

.new-line {
  white-space: pre-line;
}

在 css 中，但这也不起作用。这可能是关于使用 js 文件扩展名吗？

import React from "react";
import Badge from "../elements/Badge";
import Resume from "../../resume.json";

function AboutMe() {
  return (
    <section className="section has-background-link" id="aboutMe">
      <div className="container has-text-centered">
        <figure className="image container is-180x180">
          <img
            width="180px"
            height="180px"
            src={Resume.basics.picture}
            alt={Resume.basics.name}
            className="is-rounded"
            onError={(e)=>{e.target.onerror = null; e.target.src=Resume.basics.x_pictureFallback}}
          />
        </figure>
        <p className="subtitle is-4 has-text-white has-text-weight-bold">
          {Resume.basics.x_title}
        </p>
        <p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
          {"test Give me a new line now<br>yes I love it"}
        </p>
        <div className="container interests">
          <div className="field is-grouped is-grouped-multiline has-text-centered">
            {Resume.interests.map((value, index) => {
              return (
                <Badge key={index} text={value.name} faIcon={value.x_icon} />
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

export default AboutMe;

我只用一个css

html {
    scroll-behavior: smooth;
}
.is-180x180{
    height: 180px;
    width: 180px;
}
.skill-list > li{
    margin: 30px 0 0 0;
}
.has-bg-image {
    background-image: url('../images/GretaThunberg collage2.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.bulma-image {
    width: 200px;
}
.interests {
    display: flex;
    justify-content: center;
}
.summary-text {
    margin-left: auto;
    margin-right: auto;
    max-width: 36em;
}
.skill-percentage {
    float: right;
}

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0"
    />
    <meta name="theme-color" content="#3273DC" />
    <link rel="canonical" href="https://josecoelho93.pt" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title></title>
    <meta name="description" content="This is my personal website. You can find information about my experience, skills and articles I have written." />
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <link rel="stylesheet" href="./css/bulma-timeline.min.css">
    <link rel="stylesheet" href="./css/styles.css">
    
    <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
    
    <script defer src="https://use.fontawesome.com/releases/v5.4.0/js/all.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134602535-1"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-134602535-1');
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Answer 1

欢迎来到 Whosebug。在我看来，这不是 React.js 问题，而是 HTML/CSS 问题。我建议您尝试着重搜索 Newline in HTML / CSS 而不是提及 React，因为它与此无效无关。我可以向您保证 .js 扩展与它无关:)

此外，尝试将 HTML 复制到单独的 .html 文件中，不使用 React，如果对您来说更容易，则从那里进行调试 - 您也会看到没有任何变化并且没有效果来自 React whatever.

我建议您也尝试使用 margin-bottom padding-bottom，只是为了给您一些提示。如果您愿意，可以向我们提供 JSFiddle 以便我们观看现场演示。

编辑：进一步检查后，可能有一个 JavaScript 错误，我起初没有看到

我也会尝试以下更改：

<p>{"test Give me a new line now<br>yes I love it"}</p>

改为：

<p>test Give me a new line now<br />yes I love it</p>

你不能像这样在字符串中传递 HTML / React 元素，因为它们不会被视为字符串以外的任何其他元素。

Answer 2

尝试使用反引号... 这并不理想，但可以正常工作

Answer 3

没有深入挖掘，也没有依靠安东尼奥的回答。您可以在浏览器中使用 console.log 语句来隔离问题：

console.log("test Give me a new line now\nyes I love it")

问题是您需要替换
标签，因为您在经过清理的文本字符串中并将其替换为换行符 \n。

根据模板引擎的不同，可能有一些方法可以将 HTML 注入到文本字符串中，但您似乎只需要一个换行符。

反应功能 <br> 在此 <p> 中不起作用

react funcion <br> is not working in this <p>

html

css

newline

reactjs