Javascript 在React js中调用button onClick中的功能组件最简单的方法是什么

我在reactt Js工作。有人能给我一个方法，在单击按钮时调用功能组件AddDealItem吗。应该注意的是，每次单击按钮时，功能组件都应该被渲染

    const Deals = () => {
     return (
          <div className="p-grid p-dir-rev">
            <div className="p-col-12 p-md-2"> 
              <Button label="Add Deal Item" icon="pi pi-plus" />
             </div>
           </div>
          )
       }
 export default Deals
    
    
    const AddDealItem = (props: any) => {
        const { mainStore } = useStore();
        
        return (
            <Fragment>
                "some content"
            </Fragment>
    
        )
    }

---

你可以试试这样的

//这就是这个例子，像往常一样从react导入useState和Fragment const{useState，Fragment}=React； const AddDealItem=props=>{ //const{mainStore}=useStore；为正在运行的代码段注释掉 返回一些内容； }; const Deals==>{ const[showAdd，setShowAdd]=useStatefalse； 回来 setShowAddshowAdd=>！showAdd} 标签=添加交易项目 图标=π+π > 显示添加 {showAdd&} ; }; //渲染它 ReactDOM.render、document.getElementByIdreact；

---

这个方法对我有用

const {useState, Fragment} = React;
 const [countDealItem, setCountDealItem] = useState(0) 
const Deals = () => {
     return (
          <div className="p-grid p-dir-rev">
            <div className="p-col-12 p-md-2"> 
              <Button label="Add Deal Item" onClick={() =>setCountDealItem(countDealItem+1)} icon="pi pi-plus" />
               { Array(countDealItem).fill(<AddDealItem />) }
             </div>
           </div>
          )
       }
 export default Deals
    
    
    const AddDealItem = (props: any) => {
        const { mainStore } = useStore();
        
        return (
            <Fragment>
                "some content"
            </Fragment>
    
        )
    }