如何在包含大量数据的反应表列中创建新行

Question

我正在使用反应表。我正在调用 API (.NET) 上的一个方法，该方法连接一些字段，现在我需要在反应表列中显示这个连接字段。

我尝试从 API 中放入/n该列，以便它在 UI 上（在反应表内）呈现一个新行。但没有运气。示例：我需要显示

该字段是通过将两个数字 10 和 20 相加计算得出的。由于结果大于 15，因此无法执行此操作。

在显示的文本中，我想要的是“Since”应该在反应表中的新行中开始。

我试图把{'\n'}“Since”放在前面，但没有成功。有什么想法如何实现这一目标？

Answer 1

'\n' 转义字符在 HTML 中不起作用。您必须使用其他 HTML 解决方案，例如使用<br>或 div 才能使多行实现正常工作。

你很容易解决这个问题。获取字符串时附加一个特殊字符，例如逗号（，）或您确定不会在原始文本中使用的其他字符。

然后将该字符串获取到 React 应用程序中的 js 变量。

let multiLineString = "This field is calculated by adding two numbers 10 and 20. , Since the result is greater than 15 you cannot perform this operation";
let lines = multiLineString.split(',')
let linesHTML  = lines.map((line)=><div>{line}</div>);

现在将此变量呈现在您想要的任何地方，您将获得多行字符串实现。

当然更好的方法是从后端获取一个 json 值数组。