在 React 中，如何调用存在于另一个组件中的函数？答案

【问题标题】：in React, how to call a function living in another component?在 React 中，如何调用存在于另一个组件中的函数？
【发布时间】：2018-10-19 20:00:11
【问题描述】：

在我的反应App.js 的return 中，我目前正在以一种有效但混乱的方式调用this.searchVenues()，我知道有更好的方法。 searchVenues() 函数位于 App.js 中，我的按钮需要位于它们自己的组件中，然后只需 <ButtonComponent/> 而不是：

render() {
    return (
      <div className="App container-fluid">
        <Navbar/>
        <div className="row">
          <div className="col-xs-3">
          <button onClick ={() => this.searchVenues("yoga+coffee", "5")}>5</button>
            <button onClick ={() => this.searchVenues("yoga+coffee", "10")}>10</button>
            <button onClick ={() => this.searchVenues("yoga+coffee", "15")}>15</button>
            <SideBar {...this.state} handleListItemClick={this.handleListItemClick}/>
          </div>
          <div className="col-md-9 full-height">
            <Map {...this.state}
            handleMarkerClick={this.handleMarkerClick}/>
          </div>
        </div>
        <Footer/>
      </div>
    );
  }

但是当我这样做时，this.searchVenues("yoga+coffee", "5") 不起作用，这是可以理解的。让它发挥作用的最好或更好的方法是什么？如何从另一个文件（组件）访问该函数？

【问题讨论】：

将函数拉出到服务中，并在需要的地方导入服务

标签： javascript reactjs function react-component

【解决方案1】：

我相信你想像这样在 App.js 组件中声明你的 searchVenues 函数：

searchVenues = (arg1, arg2) => {here is the body of your function}

...并使用 props 将其传递给 ButtonComponent：

<ButtonComponent searchVenues={this.searchVenues}

一旦你在你的无状态按钮组件中，如果你想在你的渲染中避免匿名函数，你可以在其中创建一个新函数 (you can read on it here)

const searchVenues = (arg1, arg2) => { 
    return event => {props.searchVenues(arg1, arg2);}
}

...并将其添加到 onClick 事件中：

<button onClick ={searchVenues('coffee+yoga', props.value)}>{props.value}</button>

【讨论】：

您可能想将props.value 括在大括号中:)

【解决方案2】：

如果您希望您的按钮位于另一个组件中，但从另一个组件接收处理程序，您可以通过 props 传递它们。

import React, { Component } from 'react'
import MyButton from './MyButton'

export default class App extends Component {

    buttonClickHandler= () => {
        alert('I have been clicked!')
    }

    render = () => (
        <MyButton onClickHandler={this.buttonClickHandler} />
    )
}

这里是 MyButton 组件文件：

import React from 'react'

const MyButton = (props) => (
    <button onClick={props.onClickHandler}>Click Me for an Alert!</button>
)

export default MyButton

【讨论】：

【解决方案3】：

您可以在ButtonComponent 中定义searchVenues，也可以将其作为道具传递给ButtonComponent。然后在你的 ButtonComponent 渲染函数中你会做同样的事情：

<button onClick ={() => this.searchVenues("yoga+coffee", "15")}>15</button>

或者如果它作为道具传递

<button onClick ={() => this.props.searchVenues("yoga+coffee", "15")}>15</button>

我还要补充一点，@Bryan 关于服务是绝对正确的。例如，假设您在名为 Product 的数据库中有一个表。好吧，您不想在需要产品列表的每个组件中实现getAllProducts()。相反，您将创建一个名为 ProductService 的类，其中将定义 getAllProducts()。然后，对于需要产品列表的任何组件，您将导入 ProductService 类并调用ProductService.getAllProducts()。

希望对您有所帮助。

【讨论】：

【解决方案4】：

如果您想从任何组件执行方法，并且这些方法的结果会改变应用程序的全局状态，您可能会从使用actions 中受益。无论您使用的是 Flux 还是 redux 架构，都可以从应用程序的任何部分触发操作，并在全局状态中执行更改，这些更改将反映在任何侦听此状态的组件上。

https://reactjs.org/blog/2014/07/30/flux-actions-and-the-dispatcher.html https://redux.js.org/basics/actions

【讨论】：