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' 的导入位置，这就是为什么它现在没有更改我修复了错误，所以也许我应该在分配文件时更加小心。