reactjs - 如何在包含大量数据的 react 表列中创建新行

Question

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

从 API 中，我尝试将 /n 放在列中，以便它在 UI 上呈现一个新行(在 react 表内)。但没有运气。示例:我需要显示

This field is calculated by adding two numbers 10 and 20. Since the result is greater than 15 you cannot perform this operation.

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

我尝试将 {'\n'} 放在“Since”之前，但没有成功。有什么想法可以实现吗？

Answer 1

The '\n' escape character does not work in HTML. You have to work with other HTML solutions like using <br> or divs to get a multiline implementation working.

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

然后将该字符串获取到您的 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 值数组。