Почему моя строка не прерывается, когда я использую " n" в react?

#javascript #reactjs #jsx

Вопрос:

Я пытаюсь использовать этот хук:

 useEffect(() => {
  var arrText = txt.split('*');
  arrText.map((line, index) =>
    setTimeout(() => {
      setTexto((prev) => {
        return (prev  = line   'n');
      });
    }, 300 * index),
  );
}, []);

И он просто отклоняет мой n , и если я пытаюсь вернуть JSX (строка в абзаце), он становится [object object]

Не могли бы вы мне помочь? <3

1. Где или как вы отображаете значение, установленное setTexto (вероятно, оно названо texto )?

2. Вместо этого используйте , если вы находитесь в браузере.

3. Вы можете попробовать использовать обратные тики, т.е. return ( ${prev = line} n ) , или, как сказал Лукас, использовать 

4. Определите «отклоняет n «. Новая строка в браузере представляет собой просто пробел и будет свернута, если она не находится в текстовой области или предварительно отформатированном элементе.

5. @lukas.j и @Jordan Если вы говорите кому-то использовать   в качестве строки в React, вы также должны сказать им использовать dangerouslySetInnerHTML

Ответ №1:

Проблема в том, что если вы не пытаетесь отобразить новую строку в pre теге, она будет проигнорирована в браузере. Однако вы можете сохранить текстовое содержимое в состоянии в массиве, обновить его с помощью setTimeout и отобразить это состояние. Вы можете использовать  теги или   теги для отображения текста в новых строках.

Кроме того, вы не должны использовать map() , поскольку это создает новый массив. Вместо этого вы могли бы использовать forEach() или простой цикл for .

 let txt =
  'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur sapiente incidunt molestias beatae voluptas fuga repellendus sit nihil voluptate laudantium delectus aliquam, nulla non suscipit a ea natus voluptatem distinctio!';

function App() {
  let [texto, setTexto] = React.useState([]);

  React.useEffect(() => {
    txt.split(' ').forEach((line, index) =>
      setTimeout(() => {
        setTexto((prev) => {
          return [...prev, line];
        });
      }, 300 * index)
    );
  }, []);

  return (
    <div>
      {texto.map((word, i) => (
        <p key={i}>{word}</p>
      ))}
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 <div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>

Развернуть фрагмент

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