функция реакции <br>не работает в этом <p> - PullRequest
Новая
       8

функция реакции <br>не работает в этом <p>

0 голосов
/ 05 августа 2020

Я провел поиск и много пробовал сейчас, но ничего не помогает, чтобы получить здесь новую строку. Это функция React

На самом деле основная c проблема, я думаю, потому что я новичок в этом, но, пожалуйста, посоветуйте. кто-то предложил иметь это: 

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

Ответы [ 3 ]

2 голосов
/ 05 августа 2020

Добро пожаловать в StackOverflow. Мне кажется, что это не вопрос React.js, а вопрос HTML / CSS. Я бы порекомендовал вам сосредоточиться на поиске Newline в 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 / Реагировать на элементы внутри такой строки, поскольку они не будут приниматься во внимание ни как что иное, как строка.

0 голосов
/ 05 августа 2020

Не копая слишком глубоко и опираясь на ответ Антонио. Вы можете изолировать проблему с помощью оператора console.log в вашем браузере: 

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

Что происходит, вам нужно заменить тег
, потому что вы находитесь в очищенной текстовой строке, и заменить его на символ новой строки \n.

В зависимости от механизма шаблонов могут быть способы вставить HTML в текстовую строку, но похоже, что вам нужно всего лишь перевод строки.

0 голосов
/ 05 августа 2020

попробуйте использовать обратную галочку ... Это не идеально, но подойдет

...