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

【问题标题】：Wrong pass prop in react component反应组件中的错误传递道具
【发布时间】：2020-05-23 15:07:54
【问题描述】：

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

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

综上所述，title 的 prop 在 Card 组件中正确接收，但 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 状态下使用上下文控制打开/关闭模式，也许这就是问题所在？

【问题讨论】：

实际问题看你的描述不是很清楚
@William 请看演示。 title 未正确传递给模态。

标签： javascript reactjs state react-context

【解决方案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 函数作为道具传递。这样您就可以使模态成为可重用的组件。

【讨论】：