如何在 ReactJS 中显示 JSON 中的键和值对

2020-01-26 08:00:00 · 飞浪

想要了解如何在 ReactJS 中显示 JSON 中的键值对？查看本指南，获取有关如何执行此操作的详尽但简洁的解释！

介绍

JSON（JavaScript 对象表示法）是一种轻量级数据交换格式。它易于读写，机器也易于解析和生成。它基于 JavaScript 编程语言标准 ECMA-262 第 3 版的一个子集。

JSON 基本上是名称/值对的集合，其中名称始终是字符串，值可以是字符串（用双引号引起来）、数字、布尔值（真或假）、空值、对象或数组。每个名称-值对将用逗号分隔。JSON 是一种完全独立于语言的文本格式，是交换数据的理想方式。

在开始之前，让我们先讨论一下 React，这是一个用于构建用户界面的流行 JavaScript 库。它基本上处理应用程序的视图层。最好的部分是它允许您将组件分解为更小的可重用组件。与将所有逻辑放入单个文件中相比，编写较小的组件为我们提供了更好的优势。通过编写封装良好的组件，我们本质上是在制作一个可测试的应用程序，具有良好的关注点分离和最大限度的代码重用。

名称字符串规则

JSON 语法不对用作名称的字符串施加任何限制，不要求名称字符串是唯一的，也不为名称/值对的顺序赋予任何意义。这些都是语义考虑因素，可能由 JSON 处理器定义，或在定义 JSON 用于数据交换的特定用途的规范中定义。

名称的可能值

JSON 值可以是对象、数组、数字、字符串、true、false 或 null，并且 JSON 结构可以嵌套到任意级别。因此，为了简单起见并便于理解渲染部分，我们假设 JSON 名称可以有两种类型的值，即叶值或嵌套结构。叶值可以是字符串、数字、true、false 或 null。对于嵌套结构，值将是一个数组（有序列表）或一个对象（无序的名称-值对集）。

对象和数组对于表示和共享复杂的嵌套数据很有用。

例子：

      {
  "string": "Pluralsight",
  "number": 1,
  "true": true,
  "false": false,
  "null": null,
  "arrayOfStrings": ["a", "b", "c", "d"],
  "arrayOfNumbers": [1, 2, 3, 4, 5],
  "arrayOfBooleans": [true, false, true, false],
  "arrayOfObjects": [{ "a": 1 }, { "a": 2}],
  "object": {
    "anyKey": "anyValue"
  }
}
    

如何在 JSX 中渲染动态值

在开始讨论渲染名称值对之前，让我们先介绍一下 React 中动态值的渲染以及 JSX 到底是什么。

我们不一定在 React 中使用 JSX，但它在使用 UI 时非常有用。使用 React，我们无需编写 HTML 来创建 UI，只需编写 JSX。JSX 基本上是 JavaScript 的语法扩展。只不过是React.createElement(component, props, ...children)的语法糖。

例如，这两行是相同的。第二行是第一行的转译版本。

      <div>Hello World!!!</div> // jsx
React.createElement('div', null, 'Hello World!!!');
    

为了在 JSX 中呈现动态值，我们使用{}（花括号）。我们放入{}中的代码将被视为 JS 表达式，并将在运行时进行评估（该表达式必须是有效的 JS 表达式）。

渲染 JSON 值

JSON 文件的来源有很多，可以通过 API 调用或导入本地创建的 JSON 文件（扩展名为 .json）。在大多数前端应用程序中，我们与服务器交互以获取数据并填充 UI 骨架或模板。目前，我假设 JSON 在组件中可用。我们将逐一讨论所有值以及如何在 UI 中呈现或显示它们。

渲染字符串/数字值

字符串是用双引号括起来的零个或多个 Unicode 字符序列。字符串或数字值可以使用{}直接在 JSX 中呈现。例如：

      import React from 'react';

const sampleJSON = {
  "string": "PluralSight",
  "number": 1
};

function App() {
  return(
    <div>
      <p>String : {sampleJSON.string}</p>
      <p>Number : {sampleJSON.number}</p>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'));
    

渲染 Null/True/False

布尔值（true 和 false）、null 和 undefined 是有效子项，但如果将它们直接放在 JSX 中的{}内，这些值将不会呈现在 UI 中。例如，所有这些 JSX 表达式都将产生相同的空div：

      <div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
    

如果您希望在输出中显示 false、true、null 或 undefined 等值，则必须先将其转换为字符串。

例如：

      <div>{String(true)}</div>
<div>{String(false)}</div>
<div>{String(undefined)}</div>
<div>{String(null)}</div>
    

在输出中，这将分别呈现 true、false、undefined 和 null。

注意：有很多种方法可以将这些值转换为字符串。请使用任意一种。

渲染对象

接下来是 JSON 名称值对渲染中最棘手的部分。React 不直接允许我们在 JSX 中渲染任何对象。如果我们错误地这样做，将导致以下错误：

对象作为 React 子项无效（找到：具有键 { a, b, c } 的对象）。如果您想要渲染子项集合，请改用数组。

现在的问题是，如何在不破坏代码的情况下渲染对象？

正如我们已经讨论过的，我们只能渲染叶子值。对于对象，我们必须使用点符号或括号符号指定具有可渲染值的确切属性名称。

例如，为了在 UI 中呈现对象的所有属性，我们需要运行一个循环：

      import React from 'react';
import ReactDOM from 'react-dom';

const sampleJSON = {
  "object": {
    "name": "Pluralsight",
    "number": 1,
    "address": "India",
    "website": "https://www.pluralsight.com/"
  }
}

function App() {

  return (
    <div>
      {
        Object.keys(sampleJSON.object).map((key, i) => (
          <p key={i}>
            <span>Key Name: {key}</span>
            <span>Value: {sampleJSON.object[key]}</span>
          </p>
        )
      }
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'));
    

注意：如果我们只想在 UI 中显示一个可渲染属性，则不需要运行循环。我们可以简单地使用点符号来编写它。例如，要显示对象的名称值：

      <p>Name: {sampleJSON.object.name}</p>

渲染数组值

现在是指南的最后一部分，但当然不是最重要的。在 UI 中使用适当的样式呈现数组值是我们在 Todo App、Travel App 等应用程序中经常做的事情之一。

首先，让我们讨论一种情况，我们想要渲染一个叶值数组，而每个项目没有任何额外的样式或 HTML 标签。这类似于使用逗号或空格连接值，然后渲染该字符串。数组（包含所有可渲染值）可以直接渲染，如下所示：

      import React from 'react';
import ReactDOM from 'react-dom';

const sampleJSON = {
  "arrOfNumbers": [1, 2, 3, 4],
  "arrOfStrings": ["a", "b", "c", "d"]
}

function App() {
  return (
    <div>
      {sampleJSON.arrOfNumbers}
      {sampleJSON.arrOfStrings}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'));
    

接下来，要么我们想要为每个项目设置单独的样式，要么项目不是可直接渲染的值。在所有这些情况下，我们都需要运行循环。幸运的是，这在 JSX 中使用Array.map很容易做到。当我们使用 map 时，它将遍历该数组中的所有项目，我们可以返回一个新的 JSX 数组。

考虑这个例子：

      import React from 'react';
import ReactDOM from 'react-dom';

const sampleJSON = {
  "arrOfNumbers": [1, 2, 3, 4],
  "arrOfStrings": ["a", "b", "c", "d"],
  "arrOfObjects": [{ "a": 1, "b": 1 }, { "a": 2, "b": 2 }, { "a": 3, "b": 3 }]
}

function App() {
  return (
    <div>

      <h2>Array of Numbers:</h2>
      <ul>
        {sampleJSON.arrOfNumbers.map((item, i) => {
          return <li key={i}>{item}</li>
        })}
      </ul>

      <h2>Array of Strings:</h2>
      <ul>
        {sampleJSON.arrOfStrings.map((item, i) => {
          return <li key={i}>{item}</li>
        })}
      </ul>

      <h2>Array of Objects:</h2>
      <ul>
        {sampleJSON.arrOfObjects.map((item, i) => {
          return <li key={i}>{item.a} - {item.b}</li>
        })}
      </ul>

    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'));
    

结论

我希望本指南有助于理解 JSON、React、JSX 的基础知识以及如何有效地呈现不同类型的值以创建有意义的用户界面。

有用的链接

了解更多

探索 Pluralsight 的这些 JSON 和 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 ReactJS 中显示 JSON 中的键和值对

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

{ "string": "Pluralsight", "number": 1, "true": true, "false": false, "null": null, "arrayOfStrings": ["a", "b", "c", "d"], "arrayOfNumbers": [1, 2, 3, 4, 5], "arrayOfBooleans": [true, false, true, false], "arrayOfObjects": [{ "a": 1 }, { "a": 2}], "object": { "anyKey": "anyValue" } }

import React from 'react'; const sampleJSON = { "string": "PluralSight", "number": 1 }; function App() { return( <div> <p>String : {sampleJSON.string}</p> <p>Number : {sampleJSON.number}</p> </div> ) } ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react'; import ReactDOM from 'react-dom'; const sampleJSON = { "object": { "name": "Pluralsight", "number": 1, "address": "India", "website": "https://www.pluralsight.com/" } } function App() { return ( <div> { Object.keys(sampleJSON.object).map((key, i) => ( <p key={i}> <span>Key Name: {key}</span> <span>Value: {sampleJSON.object[key]}</span> </p> ) } </div> ) } ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react'; import ReactDOM from 'react-dom'; const sampleJSON = { "arrOfNumbers": [1, 2, 3, 4], "arrOfStrings": ["a", "b", "c", "d"] } function App() { return ( <div> {sampleJSON.arrOfNumbers} {sampleJSON.arrOfStrings} </div> ) } ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react'; import ReactDOM from 'react-dom'; const sampleJSON = { "arrOfNumbers": [1, 2, 3, 4], "arrOfStrings": ["a", "b", "c", "d"], "arrOfObjects": [{ "a": 1, "b": 1 }, { "a": 2, "b": 2 }, { "a": 3, "b": 3 }] } function App() { return ( <div> <h2>Array of Numbers:</h2> <ul> {sampleJSON.arrOfNumbers.map((item, i) => { return <li key={i}>{item}</li> })} </ul> <h2>Array of Strings:</h2> <ul> {sampleJSON.arrOfStrings.map((item, i) => { return <li key={i}>{item}</li> })} </ul> <h2>Array of Objects:</h2> <ul> {sampleJSON.arrOfObjects.map((item, i) => { return <li key={i}>{item.a} - {item.b}</li> })} </ul> </div> ) } ReactDOM.render(<App />, document.getElementById('app'));