反应功能 在这个 中不起作用答案

【问题标题】：react funcion is not working in this 反应功能 在这个 中不起作用
【发布时间】：2020-08-05 15:04:38
【问题描述】：

我现在已经搜索并尝试了很多，但没有任何方法可以在这里获得新行。这是 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;
}

索引.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>

【问题讨论】：

jsdiaries.com/how-to-create-a-new-line-in-jsx-and-reactjs查看此链接

标签： html css reactjs newline

【解决方案1】：

欢迎来到 StackOverflow。在我看来，这不是React.js 问题，而是 HTML/CSS 问题。我建议您尝试集中搜索 HTML / CSS 中的换行符 而不是提及 React，因为它与这不起作用无关。我可以向你保证，.js 扩展与它无关:)

另外，尝试将 HTML 复制到单独的 .html 文件中，不使用 React，如果对您来说更容易的话，从那里进行调试 - 您还会看到没有任何变化，并且 React 没有任何影响。

我建议您也尝试使用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 元素，因为它们不会被视为字符串以外的任何东西。

【讨论】：

谢谢这工作。这感觉像是一个错误解决方法
@portplays in react，有自闭标签，如<a /> 等，只是为了给你清理一下——这就是JSX语法
我还没有看到带空格的版本
我读到它是为 XHTML 编写的，谢谢了解

【解决方案2】：

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

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

问题在于您需要替换
标记，因为您处于经过净化的文本字符串中，并将其替换为换行符 \n 字符。

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

【讨论】：

【解决方案3】：

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

【讨论】：