解释如何在REACT中删除引导卡

Question

import React, { Component } from "react";
import FriendCard from "./components/FriendCard";
import Wrapper from "./components/Wrapper";
import Title from "./components/Title";
import friends from "./friends.json";
import "./App.css";

class App extends Component {
  // Setting this.state.friends to the friends json array
  state = {
    friends
  };

  removeFriend = id => {
    // Filter this.state.friends for friends with an id not equal to the id being removed
    const friends = this.state.friends.filter(friend => friend.id !== id);
    // Set this.state.friends equal to the new friends array
    this.setState({ friends });
  };

  // Map over this.state.friends and render a FriendCard component for each friend object
  render() {
    return (
      <Wrapper>
        <Title>Friends List</Title>
        {this.state.friends.map(friend => (
          <FriendCard
            removeFriend={this.removeFriend}
            id={friend.id}
            key={friend.id}
            name={friend.name}
            image={friend.image}
            occupation={friend.occupation}
            location={friend.location}
          />
        ))}
      </Wrapper>
    );
  }
}

export default App;

下面的代码片段允许我点击card（bootstrap-css）并删除card。有用！但我的逻辑思维或方法是on click, delete this card。我没有在这段代码中看到它，但它的工作原理。我不是来自编程背景。

我希望有人可以向我解释一下，如果你想的话，可以在外行术语中理解它。也许可以告诉我一些更多的例子。提前致谢。

 removeFriend = id => {

    const friends = this.state.friends.filter(friend => friend.id !== 
id);
     this.setState({ friends });
  };

总体情况如下：

继承人的朋友组成部分：

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

const FriendCard = props => (
  <div className="card">
    <div className="img-container">
      <img alt={props.name} src={props.image} />
    </div>
    <div className="content">
      <ul>
        <li>
          <strong>Name:</strong> {props.name}
        </li>
        <li>
          <strong>Occupation:</strong> {props.occupation}
        </li>
        <li>
          <strong>Location:</strong> {props.location}
        </li>
      </ul>
    </div>
    <span onClick={() => props.removeFriend(props.id)} className="remove">
      𝘅
    </span>
  </div>
);

export default FriendCard;

Answer 1

所以你在这里发布的部分

removeFriend = id => {
  const friends = this.state.friends.filter(friend => friend.id !== id);
  this.setState({ friends });
};

是你逻辑思维的最后一部分删除这张卡

它是在单击时调用的函数，但不处理实际的单击。它将id作为输入，并将您的朋友状态设置为与给定id匹配的所有元素。这是通过过滤功能完成的，您可以在这里阅读更多关于https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter的信息

关于点击的逻辑思维的下一部分是在FriendCard组件中处理的

在您的App组件中，此行将您的处理函数作为属性注入FriendsCard组件

removeFriends={this.removeFriends}

这意味着只要单击它，您的removeFriends函数将由FriendCard组件调用。

实际的点击处理在此行的FriendCard组件中完成

<span onClick={() => props.removeFriend(props.id)} className="remove">

Answer 2

你的例子不完整。要真正理解它，你需要研究<FriendCard>组件内部发生的事情。然后你会注意到逻辑可能实际上像你想象的那样工作。

你看到FriendCard组件是在第2行导入的。它是在第22行开始的render函数中引用的。

App组件有一个状态对象，其中包含friends属性。对于状态对象内的每个朋友，我们通过在第27行的状态上使用map方法迭代来渲染FriendCard组件.You can read more over the map method here。

我们将几个属性传递给FriendCard组件。我们传递给FriendCard组件的属性之一是第14行定义的removeFriend方法。

这个removeFriend方法实际上负责从我们的state对象中删除朋友。正如你所看到它接收一个id参数并为所有朋友过滤state对象，这些朋友的id与我们传入的removeFriend不同（从根本上删除我们传递给方法的id）。

click方法可能绑定到FriendCard组件中的qazxswpoi处理程序，并在我们单击它时调用。

Answer 3

以上两个答案都是正确的。我还要补充一点，当使用this.setState函数更新state属性时，这会触发React调用组件的render函数，该函数将根据您的新状态属性（i..e过滤的朋友列表）重新呈现您朋友的列表。