反应组件中的错误传递道具

Question

我有简单的Reactjs应用程序，其中包括Card和Modal组件。 每张Card都必须有一个Modal ，当点击“显示更多”按钮时，打开它。

模态应该只在它的卡片上显示标题，我的问题是传递道具给模态，只发送最后一张Card的title而不是关于它本身！

综上所述，在 Card 组件中正确接收到title的 prop，但 Card 组件无法将title正确传递给 Modal。

这是我在 CodeSandBox 中的应用程序： Demo

卡组件：

const Card = props => {
  const { children, title } = props;
  const { isShowModal, setIsShowModal } = useContext(MainContext);

  const showModalHandler = () => {
    setIsShowModal(true);
  };

  return (
    <div className="card">
      <div className="card-header">
        <h2>{title}</h2>
      </div>

      <div className="card-content">{children}</div>
      <div className="card-footer">
        <button onClick={showModalHandler}>Show More</button>
      </div>

      {isShowModal && <Modal title={title} />}
    </div>
  );
};

模态组件：

const Modal = props => {
  const { setIsShowModal } = useContext(MainContext);

  const closeModalHandler = () => {
    setIsShowModal(false);
  };

  const { title } = props;

  return (
    <div className="modal">
      <h2>Modal: {title}</h2>
      <p>
        You cliked on <b>{title}</b> Card
      </p>
      <hr />
      <button onClick={closeModalHandler}>Close</button>
    </div>
  );
};

注意：我在isShowModal state 中使用 Context 控制打开/关闭模式，也许这就是问题所在？

Answer 1

正如您认为问题似乎是您正在使用的useContext 。 所以我对代码进行了一些更改，最重要的是使用useState 。 我建议您阅读有关useContext以及何时使用它的文档。 这是更新的代码：

Card.js

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

const Card = props => {
  const { children, title } = props;
  const [ isShowModal, setIsShowModal ] = useState(false);


  return (
    <div className="card">
      <div className="card-header">
        <h2>{title}</h2>
      </div>

      <div className="card-content">{children}</div>
      <div className="card-footer">
        <button onClick={() => setIsShowModal(true)}>Show More</button>
      </div>

      {isShowModal && <Modal setIsShowModal={setIsShowModal} title={title} />}
    </div>
  );
};

export default Card;

Modal.js

import React from "react";
import "./Modal.scss";

const Modal = props => {

  const { title } = props;

  return (
    <div className="modal">
      <h2>Modal: {title}</h2>
      <p>
        You cliked on <b>{title}</b> Card
      </p>
      <hr />
      <button onClick={() => props.setIsShowModal(false)}>Close</button>
    </div>
  );
};

export default Modal;

如您所见， Modal.js组件不必是有状态的组件。 您可以将来自Card.js组件的setIsShowModal function 作为道具传递。 这样您就可以使模态成为可重用的组件。