单击图片时无法将动态内容渲染到我的模态

Question

所以我目前正在构建一个新的作品集，我想一开始只用一张图片来显示我的项目，但是当您单击该图片时，会弹出一个模式，其中包含有关该特定项目的信息。我目前停留在模态的动态内容上。当单击不同的图片时，我正在使用 useReducer 来分派不同的内容，但我只是没有连接正确的点。

这段代码是有onClick打开模态的显示图片，模态包裹着我的状态数据。状态由下面代码中定义的道具决定。

const DisplayPicture = (props) => {
    const [data, dispatch] = useReducer((state, action) => {
        if (action === props.projectAction) {
        return state
        } 
    }, props.title)
    return (
        <>
        <Modal projectAction={props.projectAction} show={props.show} closed={props.closed} >
            <h1>{data}</h1>
            </Modal>
        <div className={styles.picture} style={{backgroundImage: `url(${props.picture})`}} onClick={() => {props.clicked(); dispatch(props.projectAction)}}>
            <h1 className={styles.text}>{props.title}</h1>
        </div>
        </>
    )
}

这是在前面的代码中为我的 useReducer 定义我的道具的地方。我将每个项目 'projectAction' 道具设置为不同的值，并且该道具用作我在 useReducer 中的操作，而标题道具用作我的 useReducer 中的状态。但是，当我点击任何图片并显示模态时，它只显示模态内容的最后一个组件的标题。

非常感谢任何有关如何通过单击不同图片在模态 body 中呈现不同内容的建议。

谢谢！

https://github.com/oballematt/matthew-oballe - 如果有帮助，请将 link 添加到回购协议中。

 const [show, setShow] = useState(false)

    const openModal = () => {
        setShow(true)
    }

    const closeModal = () => {
        setShow(false)
    }

    return (
        <>
            <div className='container'>
                <h1 className={styles.title}>Projects</h1>
                <div className='row'>
                    <DisplayPicture projectAction='project1' show={show} closed={closeModal} picture={bestflix} title='BestFlix' clicked={openModal} />
                    <DisplayPicture projectAction='project2' show={show} closed={closeModal} picture={bestflix} title='Hello' clicked={openModal} />
                    <DisplayPicture projectAction='project3' show={show} closed={closeModal} picture={bestflix} title='Goodbye' clicked={openModal} />
                </div>
            </div>
        </>
    )
}

Answer 1

实际上你的问题是因为你使用单个 show 变量来控制所有模态框，当你点击一个时，所有模态框都会显示，只是你只看到了“再见”，因为它在顶部。

这是您可以进行的一种可能的修改（例如我使用了 2 个组件）：

const Projects = () => {
  const [showIndex, setShowIndex] = useState(-1);

  const openModal = (ind) => {
    setShowIndex(ind);
  };

  const closeModal = () => {
    setShowIndex(-1);
  };

  return (
    <>
      <div className="container">
        <h1 className={styles.title}>Projects</h1>
        <div className="row">
          <DisplayPicture
            projectAction="project1"
            closed={closeModal}
            picture={bestflix}
            show={showIndex === 1}
            title="BestFlix"
            clicked={() => openModal(1)}
          />

          <DisplayPicture
            projectAction="project2"
            closed={closeModal}
            picture={bestflix}
            show={showIndex === 2}
            title="Hello"
            clicked={() => openModal(2)}
          />
        </div>
      </div>
    </>
  );
};

单击图片时无法将动态内容渲染到我的模态

Cant render dynamic content to my modal when clicking a picture

reactjs

react-hooks

use-reducer