如何在 ReactJS 中管理树组件的状态

2020-04-10 08:00:00 · 飞浪

介绍 State和props是React应用的基本概念。如果你需要将数据从一个组件发送到另一个组件，那么这两个对于传递和访问数据至关重要。本指南将解释如何管理应用中的状态。在几乎所有应

介绍

State 和 props 是 React 应用的基本概念。如果你需要将数据从一个组件发送到另一个组件，那么这两个对于传递和访问数据至关重要。

本指南将解释如何管理应用中的状态。在几乎所有应用中，您都会有多个组件，就像树结构一样。您需要将数据从父组件传递给子组件，并从子组件获取响应，这将影响其他子组件。

概括

国家简介
状态在应用程序中的作用
管理应用中的状态

国家简介

状态与 JavaScript 应用中的其他变量一样，都是变量。它只能在组件内部访问。您可以将状态传递给其他子组件，也可以从子组件更改状态。

props 存储了从父组件传递到子组件的数据。你可以借助 props 来访问父组件的数据。

props 的一个关键点是它的值不能被改变。要改变子组件的 props，你需要更新父组件的 state。

国家的作用

状态用于跟踪组件中的变化。如果状态的值发生变化，则组件的渲染过程将重新开始，以反映浏览器中的变化。

您需要在进行更改后更改状态以呈现应用程序。

管理应用程序中的状态

在 React 中，如果你必须将数据从一个组件传递到另一个组件，那么你需要使用 state 从父级传递并使用 props 来获取父级数据。

最初，您只有一个组件，即 AppComponent。

在本演示中，您将创建一个手风琴。这将是一个包含几个列表的简单应用。不要费心考虑 CSS 或外观部分；本指南重点介绍状态管理相关概念。

首先，创建一个父组件。创建状态并将其作为 props 发送给子组件。

父类.js

      import React, { useState } from "react";
import Child from "./Child";

function Parent() {
  const [state, setState] = useState([
    {
      title: "First Item",
      description: "This is the first item",
      isOpen: false
    },
    {
      title: "Second Item",
      description: "This is the Second item",
      isOpen: false
    },
    {
      title: "Third Item",
      description: "This is the Third item",
      isOpen: false
    }
  ]);
  return (
    <ul>
      {state.map((item, index) => {
        return (
          <li>
            <Child item={item} arr={state} setItem={setState} />
          </li>
        );
      })}
    </ul>
  );
}

export default Parent;
    

在上面的代码中，useState钩子用于创建一个状态变量和一个更改状态的函数。如果你不熟悉这个，你可以在这里了解更多信息。

向useState()函数传递一个数组，该数组将是状态的初始值。在数组中，您将有几个对象，其中包含三个字段：title、description和isOpen。

使用状态数组创建一个无序列表。使用 map ()方法创建一个子组件列表，您将在其中传递item、array和setState函数。

接下来，创建子组件。

Child.js

      import React from "react";

function Child(props) {
  let { item, arr, setItem } = props;

  function onToggle(it) {
    let newArr = arr.map(data => {
      data.isOpen = data.title == it.title;
      return data;
    });
    setItem(newArr);
  }
  return (
    <div key={item.title}>
      <label onClick={() => onToggle(item)}>{item.title}</label>
      {item.isOpen && <p>{item.description}</p>}
    </div>
  );
}

export default Child;
    

在子组件中，你正在接受 props。如前所述，props 将存储状态的数据。

item是当前的索引数据，arr是整个数组，setItem是改变父组件state值的函数。

在子组件的返回块中，创建一个带有标签的div块以显示列表的标题和一个段落标签 (p)，用于显示列表的描述。

描述取决于isOpen是否在浏览器上呈现。通过单击列表的标题来切换。当用户单击标题时，调用onToggle()函数。

在onToggle()方法中，比较标题，假设数组中有一个唯一的标题。如果项目的标题与数组中项目的标题之一匹配，则该项目的isOpen值将为true。否则，它将为false。

设置isOpen的值后，使用修改后的数组更新状态的值。

将以下代码添加到您的App.js文件中。

App.js

      import React from "react";
import Parent from "./components/Parent";

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

export default App;
    

在App组件中渲染Parent组件。

您的应用已准备好运行。在CLI中输入命令npm start。

结论

状态是您与其他组件通信的唯一方式。在 React 中，有许多不同的方法来管理状态。您可以使用第三方状态管理库，如redux或mobx。指南中讨论的方法非常基础，并且是核心 React 的原生方法，因此理解这个概念非常重要。

这就是本指南的全部内容！继续探索更多有关状态及其用法以创建出色的应用程序。

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

_查看原文

技术指南

React框架

阅读全文

如何在 ReactJS 中管理树组件的状态

杭州电子商务研究院

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

import React, { useState } from "react"; import Child from "./Child"; function Parent() { const [state, setState] = useState([ { title: "First Item", description: "This is the first item", isOpen: false }, { title: "Second Item", description: "This is the Second item", isOpen: false }, { title: "Third Item", description: "This is the Third item", isOpen: false } ]); return ( <ul> {state.map((item, index) => { return ( <li> <Child item={item} arr={state} setItem={setState} /> </li> ); })} </ul> ); } export default Parent;

import React from "react"; function Child(props) { let { item, arr, setItem } = props; function onToggle(it) { let newArr = arr.map(data => { data.isOpen = data.title == it.title; return data; }); setItem(newArr); } return ( <div key={item.title}> <label onClick={() => onToggle(item)}>{item.title}</label> {item.isOpen && <p>{item.description}</p>} </div> ); } export default Child;