React函数式组件中如何获取另一组件内被点击的Card卡片的id

问题原因 #

你的代码存在3处核心问题：

• React hooks（useState）不能写在组件作用域外部，会直接触发语法报错
• 父组件没有把点击回调函数作为props传递给子Card组件，父子组件没有通信通道
• 子Card组件没有接收回调props，也没有在点击按钮时传入当前卡片的id触发回调

修复后代码 #

1. card.js #

import React from "react";

// 组件接收父组件传入的onBtnClick回调参数
const Card = ({ title, id, onBtnClick }) => {
    return (
        <div className="card">
            <div className="description">
                <h1>{title}</h1>
                {/* 点击按钮时触发回调，传入当前卡片id */}
                <button onClick={() => onBtnClick(id)}>Know more</button>
            </div>
        </div>
    );
};

export default Card;

2. app.js #

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

const Cards = () => {
    // 把useState移到组件内部
    const [cards, setCards] = useState([]);
    // 点击回调也定义在组件内部
    const onBtnClick = (id) => {
        console.log(id); // 此处即可拿到被点击卡片的唯一id
    };

    return (
        <div>
            {cards.length > 0 && cards.map((card) => (
                {/* 渲染时将onBtnClick作为props传给子组件 */}
                <Card key={card.id} {...card} onBtnClick={onBtnClick} />
            ))}
        </div>
    );
};

export default Cards;

内容的提问来源于stack exchange，提问作者Avatar