Question

我有一个问题，“ paragraphText”和“ paragraphLinkText”不呈现。我正在学习，所以我将很感谢您的解释。

export default function Modal({open, onClose}, props) 如果我更改{open，onClose}和props的位置，则该方法不起作用，因此可能是这样，但我不知道为什么。

console.log(open) console.log(props)：真正，对象{}

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")
    )
}

Answer 1

问题与destructuring有关，而与以下行中的React无关：

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

您将收到两个参数{open，onClose}和props。

React组件在第一个参数中接收了所有道具，因此，如果您想在第二个参数中获取道具，将永远不会存在。

解决方案是spread其余道具，以便您可以抓住从顶部传下来的所有其他物品：

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

然后您将可以访问从顶部组件传递下来的所有道具。

您可以为以前的解决方案提供的另一种方法：

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

我认为它更具可读性。

如果对此解释有疑问，请添加评论。

反应，道具不渲染

1 个答案: