将父组件的状态作为 Props 传递给子组件

2020-11-24 08:00:00 · 飞浪

介绍 React允许开发人员以组件的形式编写可重复使用的代码。这种模块化方法通过遵循父子结构并根据需要多次添加这些组件，可以轻松开发强大的应用程序。要配置组件，您可以使用props（传递

介绍

React 允许开发人员以组件的形式编写可重复使用的代码。这种模块化方法通过遵循父子结构并根据需要多次添加这些组件，可以轻松开发强大的应用程序。要配置组件，您可以使用props（传递给组件的数据），而state允许您管理可能在该特定组件内部发生变化的数据。换句话说，使用 state，您可以控制它的行为和渲染方式。本指南将演示如何通过将 state 作为 props 传递，使父组件了解子组件中的操作或更改。虽然我们将使用功能组件，但同样适用于基于类的组件。

为了说明这一点，我们将篮球运动员数组作为对象存储在主应用程序组件的状态中。接下来，我们将该状态传递给子组件 ( Player )，以实现可视化。最后，我们将设置一个函数来逐个删除球员，并查看这会如何影响父级的状态。最终代码（包括所有文件）可在Codesandbox和GitHub中找到。

在父组件中设置状态

首先，创建以下 App.js 文件：

      import React, { useState } from "react";
import Player from "./components/Player/Player";
import "./styles.css";

export default function App() {
  const [players, setPlayers] = useState([
    {
      name: "LaMarcus Aldridge",
      yearsPro: 14,
      position: "Center-Forward"
    },
    {
      name: "Marco Belinelli",
      yearsPro: 13,
      position: "Guard"
    },
    {
      name: "DeMar DeRozan",
      yearsPro: 11,
      position: "Guard-Forward"
    }
  ]);

  const playersList = players.map(({ name, yearsPro, position }) => (
    <li key={name.replace(" ", "").toLowerCase()}>
      <Player
        allPlayers={players}
        removePlayer={setPlayers}
        name={name}
        yearsPro={yearsPro}
        position={position}
      />
    </li>
  ));

  return (
    <div className="App">
      <h1>Team Members ({players.length})</h1>
      <ul className="List">{playersList}</ul>
    </div>
  );
}
    

现在，逐步检查您目前所拥有的内容。

三个标准导入：

      import React, { useState } from "react";
import Player from "./components/Player/Player";
import "./styles.css";
    

React（如预期）和useState钩子。后者将允许您访问和操作当前组件的状态。
播放器组件（稍后您将添加）
用于样式的 CSS 文件

篮球运动员列表。通过useState ，您可以在名为players 的变量中初始化一段状态，并使用函数 ( setPlayers ) 来稍后更新它

      const [players, setPlayers] = useState([
  {
    name: "LaMarcus Aldridge",
    yearsPro: 14,
    position: "Center-Forward"
  },
  {
    name: "Marco Belinelli",
    yearsPro: 13,
    position: "Guard"
  },
  {
    name: "DeMar DeRozan",
    yearsPro: 11,
    position: "Guard-Forward"
  }
]);
    

由一系列子组件组成的数组。在这里，您将状态（players变量和setPlayers函数）作为 props 传递给Player的每个实例。这将允许您从每个子组件操纵父组件的状态。

      const playersList = players.map(({ name, yearsPro, position }) => (
    <li key={name.replace(" ", "").toLowerCase()}>
      <Player
        allPlayers={players}
        removePlayer={setPlayers}
        name={name}
        yearsPro={yearsPro}
        position={position}
      />
    </li>
  ));
    

返回语句将显示玩家数量和列表（您将通过状态进行修改）：

      return (
  <div className="App">
    <h1>Team Members ({players.length})</h1>
    <ul className="List">{playersList}</ul>
  </div>
);
    

在下一节中将子组件放到位后，您将观察到玩家数量（players.length）以及列表本身（playersList）如何受到其中发生的动作的影响。

创建子组件

Player组件由一个span元素组成，该元素显示玩家的姓名、位置和经验年限。此外，当您单击列表中的相应项目时， handleRemove函数可以将每个玩家从父级状态中删除。为此，请在名为Player.js的文件中插入以下几行：

      import React from "react";
import "./Player.css";

// Destructuring props in the function arguments.
const Player = ({ allPlayers, name, yearsPro, position, removePlayer }) => {
  const handleRemove = () => {
    const filteredPlayers = allPlayers.filter((player) => player.name !== name);
    removePlayer(filteredPlayers);
  };

  return (
    <span onClick={handleRemove}>
      {name} ({position}) | Years pro: {yearsPro}
    </span>
  );
};

export default Player;
    

此时，您应该在浏览器中看到以下内容：

接下来，看看当在给定的Player组件中触发handleRemove函数时会发生什么。

通过子组件改变父组件的状态

现在您已经在父级中设置了状态并将其作为道具传递给子级，单击任何玩家并查看它是如何从列表中删除的：

如你所见，玩家数量现在是 2。如果你点击另一个玩家，它会减少到一个：

因此，当你操作Player中的道具时，你可以确认实际的玩家列表（位于App.js中）已被修改。

或者，你也可以使用 React 开发者工具检查组件：

首先，单击App ，然后在右侧窗格的Hooks部分下观察其状态。其次，单击给定的播放器组件并检查其 props。最后，单击页面中的任意项目，分别查看父组件和子组件的状态和 props 是如何更新的。

结论

虽然本指南中的示例相当简单，但您会在各种基于 React 的应用中发现相同的原理。例如，您可以将购物车视为以总价作为父组件，将每个购买的商品及其相应的小计和单个数量作为子组件。

将状态作为 props 从父组件传递到子组件是 React 的核心概念。通过只将状态保留在少数组件中，并以 props 的形式将其传递给所需的尽可能多的子组件，您将能够编写更易于维护的代码，并且您会在日后感谢自己。

了解更多

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

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

_查看原文

技术指南

阅读全文

将父组件的状态作为 Props 传递给子组件

杭州电子商务研究院

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

import React, { useState } from "react"; import Player from "./components/Player/Player"; import "./styles.css"; export default function App() { const [players, setPlayers] = useState([ { name: "LaMarcus Aldridge", yearsPro: 14, position: "Center-Forward" }, { name: "Marco Belinelli", yearsPro: 13, position: "Guard" }, { name: "DeMar DeRozan", yearsPro: 11, position: "Guard-Forward" } ]); const playersList = players.map(({ name, yearsPro, position }) => ( <li key={name.replace(" ", "").toLowerCase()}> <Player allPlayers={players} removePlayer={setPlayers} name={name} yearsPro={yearsPro} position={position} /> </li> )); return ( <div className="App"> <h1>Team Members ({players.length})</h1> <ul className="List">{playersList}</ul> </div> ); }

const [players, setPlayers] = useState([ { name: "LaMarcus Aldridge", yearsPro: 14, position: "Center-Forward" }, { name: "Marco Belinelli", yearsPro: 13, position: "Guard" }, { name: "DeMar DeRozan", yearsPro: 11, position: "Guard-Forward" } ]);

const playersList = players.map(({ name, yearsPro, position }) => ( <li key={name.replace(" ", "").toLowerCase()}> <Player allPlayers={players} removePlayer={setPlayers} name={name} yearsPro={yearsPro} position={position} /> </li> ));

import React from "react"; import "./Player.css"; // Destructuring props in the function arguments. const Player = ({ allPlayers, name, yearsPro, position, removePlayer }) => { const handleRemove = () => { const filteredPlayers = allPlayers.filter((player) => player.name !== name); removePlayer(filteredPlayers); }; return ( <span onClick={handleRemove}> {name} ({position}) | Years pro: {yearsPro} </span> ); }; export default Player;