Reactjs 道具不起作用且未在瀏覽器中顯示

Question

import { Modal } from "react-bootstrap";
import { ButtonStyled } from "../..";

const ModalCom = (props) => {
 const [show, setShow] = useState(false);

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

return (
  <>
  <ButtonStyled onClick={handleShow}>{props.buttonName}</ButtonStyled>
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>{props.title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <img src={props.image} alt='wallet' />
        <p>{props.p}</p>
      </Modal.Body>
    </Modal>
  </>
);
}

export default ModalCom;

 import { ButtonStyled, ModalCom } from '../../Components';

const Donate = () =>{
    return (
        <div>
            <ModalCom 
                buttonName='Ethereum'
                title='Ethereum Wallet'
                image={ImageAddress}
                p='23189189234923jn25890bdfs89fjnk245890'
             />
        </div>
    )
}

export default Donate;

import styled from 'styled-components'

const ButtonStyled = styled.button`
    background-color = ${({ bg }) => bg};
    color : ${({color}) => color};
    border-radius: 50px;
    padding: 10px 50px;
    border: none;
    box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 20px;
    margin-top: 30px;
    &:hover{
        color: white;
        background-color: #62D3FC;
    }

`;
export default ButtonStyled;

為什么我的道具不起作用？ 對於模態文件 position 它在模態組件中，捐贈在頁面捐贈中數據未發送或在瀏覽器中顯示我想要顯示但我想要多個模式。

當我復制 Modalcom 然后在瀏覽器中不復制時我遇到了一個新問題

Answer 1

一切似乎都很好

• 嘗試解構道具 { buttonName, title, image, p}
• 然后檢查你的進口

Answer 2

感謝您願意花時間回答我的問題，事實證明這段代碼中的錯誤是我的錯。 我忘記更改 import x from '../../molecules/Modal' 的導入位置，這就是為什么它現在沒有更改我修復了錯誤，所以也許我應該在分配文件時更加小心。