在 REACT 的段落中显示 Json 对象

Question

我目前正在尝试为音频添加成绩单。问题是我无法将 JSON 字符串放在段落格式中，而是以不同的行出现。我的代码如下

const transcript = (props) => {
  return (
      trans.word_timings[0].map(element => {
      return(
      <div className = "DisplayTextColored">
      <pre className = "TextSize">{element.word} </pre>
      </div>
      )
      })
  )
}

我的 JSON 文件是

"word_timings": [

      {
        "startTime": "2.400s",
        "endTime": "2.800s",
        "word": "This"
      },
      {
        "startTime": "2.800s",
        "endTime": "3s",
        "word": "is"
      },
      {
        "startTime": "3s",
        "endTime": "3.400s",
        "word": "Brian"
      },
      {
        "startTime": "3.400s",
        "endTime": "3.900s",
        "word": "Isaacson"
      },
      {
        "startTime": "3.900s",
        "endTime": "4.100s",
        "word": "with"
      },
      {
        "startTime": "4.100s",
        "endTime": "4.500s",
        "word": "Guardian"
      },
      {
        "startTime": "4.500s",
        "endTime": "4.500s",
        "word": "mortgage"
      },
      {
        "startTime": "4.500s",
        "endTime": "5.400s",
        "word": "company"
      },
      {
        "startTime": "5.400s",
        "endTime": "5.700s",
        "word": "at"
      },
      {
        "startTime": "5.700s",
        "endTime": "5.900s",
        "word": "the"
      },
      {
        "startTime": "5.900s",
        "endTime": "6.100s",
        "word": "sound"
      },
      {
        "startTime": "6.100s",
        "endTime": "6.200s",
        "word": "of"
      },
      {
        "startTime": "6.200s",
        "endTime": "6.300s",
        "word": "the"
      },
      {
        "startTime": "6.300s",
        "endTime": "6.500s",
        "word": "tone,"
      },
      {
        "startTime": "6.500s",
        "endTime": "6.900s",
        "word": "please"
      },
      {
        "startTime": "6.900s",
        "endTime": "7.200s",
        "word": "leave"
      },
      {
        "startTime": "7.200s",
        "endTime": "7.300s",
        "word": "your"
      },
      {
        "startTime": "7.300s",
        "endTime": "7.600s",
        "word": "name"
      },
      {
        "startTime": "7.600s",
        "endTime": "8.200s",
        "word": "phone"
      },
      {
        "startTime": "8.200s",
        "endTime": "8.300s",
        "word": "number"
      },
      {
        "startTime": "8.300s",
        "endTime": "8.600s",
        "word": "and"
      },
      {
        "startTime": "8.600s",
        "endTime": "8.700s",
        "word": "a"
      },
      {
        "startTime": "8.700s",
        "endTime": "8.800s",
        "word": "brief"
      },
      {
        "startTime": "8.800s",
        "endTime": "9s",
        "word": "message,"
      },
      {
        "startTime": "9s",
        "endTime": "9.600s",
        "word": "and"
      },
      {
        "startTime": "9.600s",
        "endTime": "10s",
        "word": "I"
      },
      {
        "startTime": "10s",
        "endTime": "10s",
        "word": "will"
      },
      {
        "startTime": "10s",
        "endTime": "10.400s",
        "word": "return"
      },
      {
        "startTime": "10.400s",
        "endTime": "10.600s",
        "word": "your"
      },
      {
        "startTime": "10.600s",
        "endTime": "10.900s",
        "word": "call."
      },
      {
        "startTime": "10.900s",
        "endTime": "11.400s",
        "word": "Thank"
      },
      {
        "startTime": "11.400s",
        "endTime": "11.500s",
        "word": "you."
      }
]

我想显示段落中的每个单词，但单词显示在不同的行中。我也不想使用 redux 左右，为此目的只使用 react-native。谁能帮我解决这个问题，在此先感谢。

Answer 1

您正在尝试映射列表中的第一项，而不是列表本身。删除[0]，它应该可以按预期工作：

return trans.word_timings.map(element => (
  <div className="DisplayTextColored">
    <pre className="TextSize">{element.word}</pre>
  </div>
));

现场示例：

我想显示段落中的每个单词，但这些单词正在 显示在不同的行中。

如果您打算将所有单词放入一个单独的段落中，最好先将它们连接成一个完整的句子并将其呈现为一个段落：

const transcript = (props) => {
  const sentence = trans.word_timings.map(timing => timing.word).join(' ');

  return <p>{sentence}</p>
}

现场示例：