Блог

у меня такая проблема, что ‘paragraphText’ и ‘paragraphLinkText’ не отображаются. Я учусь, поэтому буду благодарен за объяснение.

export default function Modal({open, onClose}, props) Если я изменяю позиции {open, OnClose} и props, тогда методы не работают, так что, вероятно, это так, но я понятия не имею, почему.

console.log(open) console.log(props) : true, объект { }

 import React, {useState} from 'react'
import './css/header.css'
import Modal from './Modal'

export default function Header(){
    const [isOpen, setIsOpen] = useState(false)
    return(
        <div className='header'>
            <div className='Sign In'><h1 onClick={() => setIsOpen(true)}>Sign In</h1></div>
            <Modal open={isOpen} onClose={() => setIsOpen(false)} paragraphText="Already have an account?" paragraphLinkText="log in"></Modal>
        </div>
    )
}
  

 import React from 'react'
import ReactDom from 'react-dom'
// import classes
import SignIn from './SignIn'
// import css
import './css/modal.css'
// import rest
import { FaTimes } from 'react-icons/fa'
import { IconContext } from "react-icons";

export default function Modal({open, onClose}, props){
    console.log(open)
    console.log(props)
    if(!open) {return null}


    return ReactDom.createPortal(
        <div className='modal-overlay'>

            <div className="modal-inside" id="modal-signin">

                <div className="close-modal-box-top">
                    <IconContext.Provider value={{size:"1em", style: { verticalAlign: 'bottom' } }}>                
                        <div className="close-modal" onClick={onClose}><FaTimes /></div>
                    </IconContext.Provider>   
                    <h2>sign in</h2>
                    <div></div>

                </div>
                <SignIn />
                <button>submit</button>
                <div className='loginP'><p>{props.paragraphText}</p><p>{props.paragraphLinkText}</p></div>

            </div>

        </div>,
        document.getElementById("portal")
    )
}
  

Проблема связана с деструктурированием и не обязательно с реакцией в следующей строке:

 export default function Modal({open, onClose}, props){
  

вы получаете два параметра {open, OnClose} и реквизит.

Компонент React получил все реквизиты в первых параметрах, поэтому, если вы хотите получить реквизиты во втором параметре, их там никогда не будет.

Решение заключается в spread остальной части реквизита, чтобы вы могли захватить все остальное, что было передано сверху:

 export default function Modal({open, onClose, ...props}){
  

тогда у вас будет доступ ко всем реквизитам, которые были переданы из верхнего компонента.

Альтернативный метод для предыдущего решения, который вы можете сделать:

 export default function Modal(props){
  const {open, onClose, paragraphText, paragraphLinkText} = props;
}
  

который я считаю более читаемым.

Добавьте комментарий, если у вас есть вопросы по поводу этого объяснения.