用 HTML 和 CSS 替换 JSON 结果中的值

Question

我会尽力解释这一点。有一个 JSON 结果将文本的每个段落分开，并用 0 或 1（甚至 0.3 等）标记它们。前端的字符串化结果也显示了这些数字。有没有办法替换这些并根据值（0、0.1 或 1）应用 CSS 样式？

JSON：

原始：

"content": [
          [
            0.0, 
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 
            []
          ], 
          [
            0.0, 
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 
            []
          ], 
          [
            1, 
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 
            []
          ]
        ], 
...

我在前端得到的是：

0Lorem ipsum dolor sit amet, consectetur adipiscing elit.0Lorem ipsum dolor sit amet, consectetur adipiscing elit.1Lorem ipsum dolor sit amet, consectetur adipiscing elit.

我应该得到：

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

将 0 和 1 替换为 html（和类）

Answer 1

您应该能够映射该内容并从每个项目中提取值，然后渲染它们。

data.content.map((item, i) =>
  <p key={i} className={ item[0] < 0.5 ? 'low-value' : 'high-value' }>{ item[1] }</p>
)

然后你可以使用deconstructing assignment 来使这个更干净，并给每个值一个命名的局部变量。

data.content.map(([value, text, array], i) =>
  <p key={i} className={ value < 0.5 ? 'low-value' : 'high-value' }>{ text }</p>
)