Javascript 模态组件不会在自定义按钮组件上渲染

我试图在点击按钮时呈现自定义和动态模式。例如，当单击“游戏”按钮时，我希望使用有关游戏的规范呈现模式，当单击“银行”按钮时，我希望使用有关银行的规范填充模式

首先，当我向自定义按钮组件添加onClick函数时，模式不会渲染。但是，当我将onClick函数放在一个常规按钮上时，模态确实会渲染。如何简单地在任何组件上添加onClick函数来呈现动态模式

其次，我想用不同的网络数据填充每个模式。例如，“游戏”按钮将使用“游戏”等标题填充模式。我用道具来做这件事，但这是最好的解决方案吗

这是我到目前为止的代码，但是当我将onClick函数添加到组件时，代码被破坏了

//Navbar.js
从“../contexts/ModalContext”导入{ModalContext}
函数Navbar（）{
const[showmodel，updateshowmodel]=React.useState（false）
const-togglemodel=（）=>updateshowmodel（（状态）=>！state）
返回(
)
//不呈现模态
//呈现模态
显示模态
)
}

从“../context/ModalContext”导入{ModalContext}
//Modal.js
常量模态=（{title}）=>{
返回(
{（上下文）=>{
if（context.showmodel）{
返回(
{title}
X
)
}
返回空
}}
)
}

//modalContext.js
export const ModalContext=React.createContext（）

//Button.js
函数按钮（{标签，类型='default'，图标}）{
返回(
{设置图标（图标）}
{label}
)
}

第一个问题：
我认为

组件的

onClick

属性没有指向组件内部实际

HTML按钮的
onClick
。
你能检查一下吗？如果您认为它是以正确的方式设置的，那么您可以共享组件的代码吗

第二个问题
是的，还有另一种方法。我想是的。您可以按照以下方式构建模式：

<Modal
  showModal={showModal}
  updateModalState={toggleModal}
>
  <div className="modal__header">{title}</div>
  <div className="modal__body">{body}</div>
  <div className="modal__footer">{footer}</div>
</Modal>


{title}
{body}
{footer}

我认为这种模式将使您能够更好地控制该组件。
问题
// Button.js
function Button({ label, type='default', icon, onClick }) {
  return (
    <ButtonStyle buttonType={type} onClick={onClick}>
      {setIcon(icon)}
      {label}
    </ButtonStyle>
  )
}

// Button.js
function Button({ label, type = 'default', icon, ...props }) {
  return (
    <ButtonStyle buttonType={type} {...props}>
      {setIcon(icon)}
      {label}
    </ButtonStyle>
  )
}

您没有将
onClick
prop传递给样式化按钮组件

// Button.js
function Button({ label, type='default', icon, onClick }) {
  return (
    <ButtonStyle buttonType={type} onClick={onClick}>
      {setIcon(icon)}
      {label}
    </ButtonStyle>
  )
}

// Button.js
function Button({ label, type = 'default', icon, ...props }) {
  return (
    <ButtonStyle buttonType={type} {...props}>
      {setIcon(icon)}
      {label}
    </ButtonStyle>
  )
}

解决方案
给定样式组件按钮：

const ButtonStyle = styled.button``;

自定义
按钮
组件需要将所有按钮道具传递给
按钮样式
组件

// Button.js
function Button({ label, type='default', icon, onClick }) {
  return (
    <ButtonStyle buttonType={type} onClick={onClick}>
      {setIcon(icon)}
      {label}
    </ButtonStyle>
  )
}

// Button.js
function Button({ label, type = 'default', icon, ...props }) {
  return (
    <ButtonStyle buttonType={type} {...props}>
      {setIcon(icon)}
      {label}
    </ButtonStyle>
  )
}

第二个问题
对于第二个问题，我建议将open/close/title状态与
modal
组件一起完全封装在模式上下文提供程序中

// Button.js
function Button({ label, type='default', icon, onClick }) {
  return (
    <ButtonStyle buttonType={type} onClick={onClick}>
      {setIcon(icon)}
      {label}
    </ButtonStyle>
  )
}

// Button.js
function Button({ label, type = 'default', icon, ...props }) {
  return (
    <ButtonStyle buttonType={type} {...props}>
      {setIcon(icon)}
      {label}
    </ButtonStyle>
  )
}

下面是一个示例实现：

const ModalContext = React.createContext({
  openModal: () => {},
});

const Modal = ({ title, onClose}) => (
  <>
    <h1>{title}</h1>
    <button onClick={onClose}>X</button>
  </>
)

const ModalProvider = ({ children }) => {
  const [showModal, setShowModal] = React.useState(false);
  const [title, setTitle] = React.useState('');

  const openModal = (title) => {
    setShowModal(true);
    setTitle(title);
  }

  const closeModal = () => setShowModal(false);

  return (
    <ModalContext.Provider value={{ openModal }}>
      {children}
      {showModal && <Modal title={title} onClose={closeModal} />}
    </ModalContext.Provider>
  )
}

const ModalContext=React.createContext({
OpenModel:（）=>{}，
});
常量模态=（{title，onClose}）=>(
{title}
X
)
const ModalProvider=（{children}）=>{
const[showmodel，setshowmodel]=React.useState（false）；
const[title，setTitle]=React.useState（“”）；
常量OpenModel=（标题）=>{
设置显示模式（真）；
片名（片名）；
}
const closeModal=（）=>setShowModal（false）；
返回(
{儿童}
{showmodel&&}
)
}

设置/打开模式的消费者示例：

const OpenModalButton = ({ children }) => {
  const { openModal } = useContext(ModalContext);

  return <button onClick={() => openModal(children)}>{children}</button>
}

const OpenModalButton=（{children}）=>{
const{openModal}=useContext（ModalContext）；
返回openModal（children）}>{children}
}

用法示例：

function App() {
  return (
    <ModalProvider>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>

        <OpenModalButton>Modal A</OpenModalButton>
        <OpenModalButton>Modal B</OpenModalButton>
      </div>
    </ModalProvider>
  );
}

函数应用程序（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
模态A
模态B
);
}

演示
您能否共享
按钮
组件实现？它是否将
onClick
prop代理到任何可单击的底层DOMNode/元素上？如果您想使模式内容动态化，那么我建议将该部分设置为
ModalContext
状态，并为其公开更新程序函数。我还看到您的
ModalContext.Provider
没有呈现/包装
子对象
，因此它无法实际向任何使用者提供上游上下文。请检查我更新的代码中的Button.js实现。我看到，它不会分解结构并将
onClick
属性传递给任何对象，因此它不可单击。您还可以共享
ButtonStyle
component吗？@DrewReese ButtonStyle只是同一个Button.js文件中的样式化组件。就是这样：
const ButtonStyle=styled.button
`