Javascript 我可以通过单击按钮调用组件，并且可以直接在onclick事件值内传递组件吗？

我试图通过单击另一个组件中的添加按钮来调用一个组件，该组件有一个包含所有产品信息的容器。我想点击add product按钮，加载或弹出AddProduct组件，这样我就可以开始填写产品信息了。 代码如下：

import React from 'react'
import './Home.css'
import Dropdown from './Dropdown'
import Radiobutton from './Radiobutton'
import AddProduct from './AddProduct'


function Home() {



return (
    <div>
        <Radiobutton />
        
    <div className="product">
        <Dropdown />
        
        
        <button className="btn1" onClick={<AddProduct />}>
            &#x2b;AddProduct</button> 
    </div>
        
    </div>
  )
}

export default Home

从“React”导入React
导入“./Home.css”
从“./Dropdown”导入下拉列表
从“./Radiobutton”导入Radiobutton
从“./AddProduct”导入AddProduct
函数Home（）{
返回(
+；添加产品
)
}
导出默认主页

单击按钮时加载此组件

 import React from 'react'
 import Dropdown from './Dropdown'
 import './AddProduct.css'

 function AddProduct() {
   return (
    <div className="box">
        <h1>Add Product</h1>
        <p>
        <input type="text" placeholder="Name"></input>
       <Dropdown />
        </p>
        
       
       <p>
       <input type="text" placeholder="Stock"></input>
       </p>

       <div>
       <button className="btn2">Save</button>
       </div>
    
      
    </div>
   )
}

export default AddProduct

从“React”导入React
从“./Dropdown”导入下拉列表
导入“./AddProduct.css”
函数AddProduct（）{
返回(
添加产品




拯救
)
}
导出默认AddProduct

使用状态来处理弹出窗口的可见性，如布尔值

showAddProduct

，单击

添加产品

按钮时将其切换。如下图所示。 保存产品时将其关闭

const{useState}=React；
//添加组件
常量单选按钮=（）=>；
常量下拉列表=（）=>下拉列表1
下拉列表2
;
//实际代码
函数Home（）{
const[showAddProduct，setShowAddProduct]=useState（false）；
返回(
setShowAddProduct（！showAddProduct）}>
添加产品
{showAddProduct&}
);
}
函数AddProduct（{setShowAddProduct}）{
返回(
添加产品




setShowAddProduct（假）}>
拯救
);
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
.modal{
显示：块；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
.盒子{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}

我建议在单击按钮时使用带有show的setstate，并设置在设置对象时调用的道具。如果我得到一个沙盒链接会有帮助吗？我能看到代码吗？如果你能分享你的代码，我可以展示谢谢这有帮助，但我遇到了一个问题，当点击弹出窗口时，productList组件位于弹出窗口下。我只想在点击按钮时显示并弹出AddProduct组件。这需要将AddProduct包装在一个模式容器中，您可以在网上找到合适的样式。无论如何，我已经用模态风格更新了我的答案。检查更新的答案。好的，谢谢你的帮助@tmh同上。如果我想在单击“注册”按钮时将组件作为页面调用，我该怎么做？