使用 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);