추가 방법추가 방법두 줄 사이에 리액트 태그를 붙이는 게 어때요?두 줄 사이에 리액트 태그를 붙이는 게 어때요?

추가 방법
두 줄 사이에 리액트 태그를 붙이는 게 어때요?

리액트 하고 있어요.줄 바꿈을 추가하고 싶다<br>현악기 사이에

'결과 없음' 및 '다른 검색어를 사용해 보십시오'입니다.

난 시도했다.'No results.<br>Please try another search term.'

하지만 동작하지 않습니다.<br>를 참조해 주세요.

어떻게 해결할지 생각나는 거 없어?

   render() {
       let data = this.props.data;
       let isLoading = this.props.isLoading;
       let isDataEmpty = Object.entries(data).length === 0;
       let movieList = isLoading ? <Loader /> : isDataEmpty ? 'No results. Please try another search term.' :
           Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
       return (
           <div className='movieList'>{movieList}</div>
       );
   }

문자열 대신 JSX를 사용해야 합니다.

<div>No results.<br />Please try another search term.</div>

jsx마다 1개의 랩퍼가 있어야 하기 때문에 추가했습니다.<div>문자열 래퍼입니다.

코드는 다음과 같습니다.

render() {
   let data = this.props.data;
   let isLoading = this.props.isLoading;
   let isDataEmpty = Object.entries(data).length === 0;
   let movieList = isLoading ? <Loader /> : isDataEmpty ? <div>No results.<br />Please try another search term.</div> :
       Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
   return (
       <div className='movieList'>{movieList}</div>
   );
}

CSS 공백 공간을 사용하여 문제를 해결할 수 있습니다.

리액트 컴포넌트

render() {
   message = `No results. \n Please try another search term.`;
   return (
       <div className='new-line'>{message}</div>
   );
}

CSS

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

산출량

No results.
Please try another search term.

텍스트를 줄 바꿈:

render() {
  ...
  <div>
    {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
  </div>
  ...

다음과 같은 HTML 요소<img>그리고.<input>태그를 하나만 사용합니다.단일 태그 요소에 속하는 이러한 태그는 시작 태그도 닫힘 태그도 아닙니다.그것들은 스스로 닫는 태그입니다.

JSX에서는 슬래시를 포함해야 합니다.그래서 제거한다.<br>그리고 시도하다<br />

내가 이걸 어떻게 해결했는지 알려줄게.메시지는 다음과 같이 HTML로 표시되는 줄 바꿈을 포함하는 문자열을 가진 프로펠러/변수로 합니다.

message = 'No results.<br>Please try another search term.';
<div>
  {message}
</div>

이걸 작동시키려면\n브레이크 태그 대신<br>이 메시지의 래퍼 요소에 다음 css를 설정합니다.

message = 'No results.\nPlease try another search term.';
<div className="msg-wrapper">
  {message}
</div>

CSS:

.msg-wrapper {
  white-space: pre-wrap;
}

출력:

No results.
Please try another search term.

스트링을 삽입하지 않으면<div>사용할 수 있다<>할 수 있어요.

다음과 같이 합니다.

var text = <>This is a text in the first line;<br />this is a text in a second line</>;

텍스트 분할 기준/n이 방법은 다음과 같습니다.

<div>
    {text.split('\n').map((item, i) => <p key={i}>{item}</p>)}
</div>

스팬을 사용하여 시도

return (
           <div className='movieList'><span>{movieList}</span></div>
       );

만약 당신이 나와 같은 상황에서 css를 추가하고 싶지 않다면 그렇게 할 수 있습니다.

render () {
...
return (
...
<Typography component="p">
...
{(contact.lastname)?<div>Hello {contact.firstname} {contact.lastname}</div>:''}
...
</Typography>
...
);
}

를 사용하여
하지만 이것이 문제의 정확한 해결책인지 잘 모르겠습니다.

 import React from 'react';
import ReactDOM from 'react-dom';

let element = (
<div>
  <h1> Hello world</h1>
  This is just a sentence <br></br>
  But This line  should not be in the same previous line. <br></br>
  The above content proves its working. <br></br>
  npm v6.14.6 | react : {React.version} 
</div>
);

ReactDOM.render(element,document.getElementById("html-element-id"))

스판 태그를 추가하고 블록을 클래스로 추가할 수 있습니다.

Pomodoro Technique Timer <span className="block">with Bla</span>

가장 간단한 것은 컴포넌트를 만드는 것입니다.

const EmptySpace = ({ spaceCount = 0 }) => {
  return (
    <>
      {Array.from({ length: spaceCount }, (item, index) => {
        return <br key={index} />;
      })}
    </>
  );
};

export default EmptySpace;

<EmptySpace spaceCount={1} />

이 경우 다음과 같은 작업을 수행할 수 있습니다.

const msg = (
    <p>
      No results <EmptySpace spaceCount={2} />
      Please try another search term.
    </p>
  );

언급URL : https://stackoverflow.com/questions/45935733/how-to-add-a-br-tag-in-reactjs-between-two-strings