Есть ли способ получить новые строки в JSX-строки, чтобы они отображались в HTML

Question

Итак, я хочу, чтобы одна строка отображалась в нескольких строках, что-то вроде этого:

const str = "Hi\n\there\nBob"
let jsxElement = (<div>{str}</div>)

Должно отображаться jsxElement следующим образом:

Hi
there
Bob

Я пытался \n и \r\n и &nbsp и <br> и <br />.Есть идеи?

Answer 1

\ n не будет работать, если вы введете его в div. Я вижу, что вы хотите, чтобы отдельные слова отображались в каждой строке.Один из способов сделать это - разделить строку на пробел ("") и отобразить результирующий массив.Примерно так.

  let splitArray = str.split(" ");
  splitArray.map( (s) => (
          <div>{s}</div>
 ))

вы также можете использовать <Fragment>, если вам не нравится генерировать несколько div-ов.

Answer 2

Вы можете сделать это, используя <React.Fragment>, например:

  render() {
    const test = "Hi\n\there\nBob";
    return (
      <div>
        {test.split('\n').map((item, index, arr) => {
            return <React.Fragment>
              {item}{index < arr.length - 1 && <br/>}
            </React.Fragment>
        })}       
      </div>
    )
  }

Answer 3

Вы не можете установить строку вставки, содержащую html напрямую, вместо этого вы будете использовать dangerouslySetInnerHTML атрибут, к которому вы хотите добавить html в виде строки

<div dangerouslySetInnerHTML={{__html:"Line1</br>Line2</br>Line3"}}></div> 

Второй способ сделать это - использовать васэта функция

  appendMiltilineString = (str) => {
    str = str.split('\n')
    return (<>
        {str.map(line=>
        (<>
            {line}<br></br>
        </>))}
      </>)
  }
 {this.appendMiltilineString('Line1\nLine2\nLine3')}