在 JSX 内多行中断文本 [重复]

Posted 2023-05-07

【中文标题】在 JSX 内多行中断文本 [重复]

【英文标题】：Break text on multiple lines inside JSX [duplicate]

【发布时间】：2020-10-13 21:40:16

【问题描述】：

拥有这个组件：

import React from "react";
import  Popup  from "semantic-ui-react";

const MyComponent = () => 
  const value = "TEST";
  return (
    <Popup
      content=`This is the data: $value`
      on="click"
      pinned
      trigger=<div>value</div>
    />
  );


export default MyComponent;

我想在多行上显示content 数据，但似乎不起作用。

到目前为止尝试过：

content=`This"\n"is the data: $value`
content=`This \n is the data: $value`

有什么想法吗？

【问题讨论】：

尝试使用<br> 元素而不是\n

尝试了 content=This<br/>is the data: $value。还是不行

你可以直接传递jsx而不是字符串，这样你就可以修改你的语句

【参考方案1】：

这似乎是个老问题了。

在这里回答：https://github.com/Semantic-Org/Semantic-UI/issues/5575

解决了使用 html 代替内容，<br /> 作为分隔符。