Блог

Главная - Вопросы по программированию - Как передать многострочную строку в качестве реквизита в компоненте React?

Как передать многострочную строку в качестве реквизита в компоненте React?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытаюсь передать строку в качестве реквизита одному из моих компонентов. Строки слишком длинные, и мне нужно разделить их на разные абзацы (многострочные). Я пробовал использовать n , но, похоже, это не работает.

Ниже приведены коды.

 <SimpleCard
            title={"What's our plan?"}
            subtitle={"The end-goal"}
            description={
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. nn"  
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        }
      />

Комментарии:

1. Отправьте ее как элемент jsx. <p>текст1</p><p>текст2</p> код

Ответ №1:

Решение 1: разделение n и сопоставление

Если вы предпочитаете писать n в своих текстах, вы можете сделать это с помощью этого решения

 function App(props) {
  return <div>{
    props.text.split("\n").map(line => (<p>{line}</p>))
  }</div>;
}

ReactDOM.render(
  <App text="lorem ipsumnlorem ipsum" />,
  document.getElementById("container")
);

Решение 2: Массив строк

Конечно, если вы хотите пропустить разделение и записать массив, это тоже хорошо.

 function App(props) {
  return <div>{
    props.text.map(line => (<p>{line}</p>))
  }</div>;
}

ReactDOM.render(
  <App text={['loren ipsum', 'lorem ipsum']} />,
  document.getElementById("container")
);

Ответ №2:

Вы можете использовать javascript template literals . Литералы шаблонов поддерживают многострочную строку без использования каких-либо /n . У него также есть некоторые другие интересные функции.

Общий синтаксис template literals заключается в том, чтобы обернуть строку внутрь `(обратная галочка).

Пример приведен ниже:

 <Component
   title={"Title"}
   subtitle={"Subtitle"}
   description={
     `This is the 1st line of the description.
      This is the 2nd line of the description.`
   }
/>
Метки: