使用 React 组件将数据传递给模态

Question

我正在创建一个可点击的项目列表，当它被点击时，以带有更多详细信息的模式显示项目。

我创建了一个这样的组件：

const Projects = (props) => {

    const [modalOn, setModalOn] = useState(false);

    const handleOnOpen = () => setModalOn(true);
    const handleOnClose = () => setModalOn(false);

    return (
        <div id="projects">
            <ul key="1">
                {
                    props.children.map((data, index) => {
                        return <li key={data.id} className="mx-2 rounded-lg border">
                            <div className="overflow-hidden cursor-pointer" onClick={ () => handleOnOpen }>
                                <CoverRender>{data}</CoverRender>
                            </div>
                            <div className="px-4 pt-3">
                                <h1 className="font-bold">{data.name}</h1>
                                <p>{data.description}</p>
                            </div>
                        </li>
                    })
                }
            </ul>
            <Modal onClose={handleOnClose} visible={modalOn} projectModalData={modalData}/>
        </div>
    );
};

export default Projects;

请注意，“道具”数据源是一个简单的数组，它遍历每个呈现列表的项目，并且最后调用了模态组件，在迭代之后，我如何将列表中的项目与相应的信息链接起来模态？

我已经尝试在 onClick 中添加一个选项以将日期值传递给 ModalData，但是当我单击此变量时它没有任何值。

Answer 1

为您的数据添加 state 并在单击项目时调用setModalData ，然后将modalData作为道具传递给您的模态

const [modalData, setModalData] = useState(null);