反应，道具不呈现

Question

我遇到了“paragraphText”和“paragraphLinkText”无法呈现的问题。 我正在学习，所以我会感谢你的解释。

export default function Modal({open, onClose}, props)如果我改变了 {open, onClose} 和 props 的位置，那么这些方法不起作用，所以可能是这样，但我不知道为什么。

console.log(open) console.log(props) : true, Object { }

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

问题与解构有关，不一定与以下行中的 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;
}

我认为它更具可读性。

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