React：我可以根据需要从 Class 组件中调用函数组件吗？答案

【问题标题】：React: Can i call a function component from a Class component on demand?React：我可以根据需要从 Class 组件中调用函数组件吗？
【发布时间】：2021-08-31 09:36:01
【问题描述】：

我创建了一个函数组件，它根据 API 值计算并返回页面按钮，每当我单击按钮时我都需要调用该函数以使其更新。 onClick() 函数位于 Class 组件内，我需要使用该 onClick() 函数调用函数组件。我无法让它工作：

功能：

    function Paging(props) {
      const apiPaging = props.state.apiPaging
      const renderPageNumbers = apiPaging.map((links, index) => {
        return <button key={index} id={index} 
                url={links.url}
                onClick={props.data.handleClick} 
                className={links.active ? "mark-page" : "" } 
                >{links.label}
                </button>     
    })
    return (
           <div id = "page-nums">
                {renderPageNumbers}
           </div>
          )

类：

     handleClick(event) {

        this.fetchApi()
        > Need it here <

    }

    return(
         <div>
               <Paging 
                data = {this}
                state = {this.state}
                />
          </div>
        )

【问题讨论】：

有点不清楚是要从父组件调用子组件的函数，还是要将父组件的回调传递给子组件以附加到子组件中呈现的按钮.但是，如果 that 是你的问题，你不能调用 React 函数。也许我只是想念你所要求的，但据我所知，你所说的你想要的是能够从父级调用是父级已经拥有并作为道具传递给子组件的东西。跨度>
@DrewReese Paging() 函数是一个单独的组件，它是通过第一类（类似于主组件）导入的，在该类内部有一个 onClick 函数。这有点令人费解，我知道...

标签： reactjs function class

【解决方案1】：

您应该将handleClick 传递给Pagingcomponent：

<Paging handleClick={handleClick} state={this.state} />

在Paging:

onClick={props.handleClick}

【讨论】：

谢谢，这些按钮可以工作，但是每当我按下该按钮时，我都需要重新运行整个函数（以便获得不同的数字数组），但它仍然什么也不做。
我觉得你应该用描述细节问其他问题
其实没关系，这成功了。 a 还必须修复一些我传递给按钮的值，现在它可以正常工作了，谢谢 :)

【解决方案2】：

你可以这样做：

<Paging handleClick={handleClick} state={this.state} />

在Paging：

onClick={(index)=>props.handleClick(index)}

在您的 handleClick 函数中：

 handleClick(index) {
    this.fetchApi()
   // you have access to btn index here whith index variable
    > Need it here <

}

【讨论】：