javascript 如何在React组件中传递多行字符串作为props？

vaj7vani 于 2023-05-27 发布在 Java

关注(0)|答案(2)|浏览(120)

我试图将字符串作为prop传递给我的一个组件。字符串太长，我需要将它们分隔成不同的段落（多行）。我试过使用\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. \n\n\" +
              "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."
        }
      />

JavaScript

来源：https://stackoverflow.com/questions/64906878/how-to-pass-a-multi-line-string-as-props-in-a-react-component

2条答案

按热度按时间

jchrr9hc1#

你可以使用javascript template literals。模板文字支持多行字符串，而不使用任何/n。它也有一些其他有趣的功能。
template literals的一般语法是将字符串 Package 在**``**（反勾）内。
下面给出一个示例：

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

赞(0）回复(0）举报 2023-05-27

oyt4ldly2#

方案一：拆分`\n`和Map

如果您喜欢在文本中写入\n，可以使用此解决方案

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

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

方案二：字符串数组

当然，如果你想跳过拆分并写出数组，那也没问题。

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

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

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 如何在React组件中传递多行字符串作为props？

2条答案

方案一：拆分`\n`和Map

方案二：字符串数组

相关问题

热门标签

最新问答

javascript 如何在React组件中传递多行字符串作为props？

2条答案

方案一：拆分\n和Map

方案二：字符串数组

相关问题

热门标签

最新问答

方案一：拆分`\n`和Map