Javascript 在React中，如何调用另一个组件中的函数？

在我的react的

App.js

的

return

中，我目前正在调用

this.searchVinces（）

，这种方法虽然有效，但很混乱，我知道还有更好的方法。

searchVinces（）

函数位于

App.js

中，我有一些按钮需要位于它们自己的组件中，然后只需

而不是：

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>
    );
  }

render（）{
返回(
这个。搜索地点（“瑜伽+咖啡”，“5”）}>5
这个。搜索地点（“瑜伽+咖啡”，“10”）}>10
这个.搜索地点（“瑜伽+咖啡”，“15”）}>15
);
}

---

但是当我这样做的时候，瑜伽+咖啡（“瑜伽+咖啡”，“5”）不起作用，这是可以理解的。让它工作的最好或更好的方法是什么？如何从另一个文件（组件）访问函数？

您可以在

ButtonComponent

中定义

SearchVinces

，或者将其作为道具传递给

ButtonComponent

。然后在

按钮组件

渲染函数中执行相同的操作：

this.searchVinces（“瑜伽+咖啡”，“15”）}>15

或者如果它作为道具传递

this.props.searchVinces（“瑜伽+咖啡”，“15”）}>15

我还要补充一点，@Bryan在服务方面是绝对正确的。例如，假设您在数据库中有一个名为Product的表。当然，您不希望在每个需要产品列表的组件中实现

getAllProducts（）

。相反，您将创建一个名为ProductService的类，其中将定义

getAllProducts（）

。然后，对于需要产品列表的任何组件，您将导入ProductService类并调用

ProductService.getAllProducts（）

---

希望能有所帮助。

您可以在

按钮组件中定义
搜索地点
，或者将其作为道具传递给
按钮组件
。然后在
按钮组件
渲染函数中执行相同的操作：

this.searchVinces（“瑜伽+咖啡”，“15”）}>15

或者如果它作为道具传递

this.props.searchVinces（“瑜伽+咖啡”，“15”）}>15

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

希望这会有所帮助。
如果您希望按钮位于另一个组件中，但从另一个组件接收处理程序，则可以通过道具传递它们

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} />
    )
}

import React，{Component}来自“React”
从“/MyButton”导入MyButton
导出默认类应用程序扩展组件{
buttonClickHandler=（）=>{
警报（'我已被单击！'）
}
渲染=（）=>(
)
}

下面是MyButton组件文件：

import React from 'react'

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

export default MyButton

从“React”导入React
常量MyButton=（道具）=>(
单击我获取警报！
)
导出默认MyButton
如果您希望按钮位于另一个组件中，但从另一个组件接收处理程序，则可以通过道具传递它们

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} />
    )
}

import React，{Component}来自“React”
从“/MyButton”导入MyButton
导出默认类应用程序扩展组件{
buttonClickHandler=（）=>{
警报（'我已被单击！'）
}
渲染=（）=>(
)
}

下面是MyButton组件文件：

import React from 'react'

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

export default MyButton

从“React”导入React
常量MyButton=（道具）=>(
单击我获取警报！
)
导出默认MyButton
我相信您希望在App.js组件中声明SearchVinces func，如下所示：

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

。。。并使用道具将其传递给ButtonComponent：

<ButtonComponent searchVenues={this.searchVenues}

。。。并将其添加到onClick事件：

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

{props.value}
我相信您希望在App.js组件中声明SearchVinces func，如下所示：

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

。。。并使用道具将其传递给ButtonComponent：

<ButtonComponent searchVenues={this.searchVenues}

。。。并将其添加到onClick事件：

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

{props.value}
如果您希望从任何组件执行方法，并且这些方法的结果将更改应用程序的全局状态，则使用
操作可能会使您受益。
无论您使用的是flux还是redux架构，都可以从应用程序的任何部分触发操作，并在全局状态下执行更改，这些更改将反映在侦听此状态的任何组件上


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


将函数提取到服务中，并在需要时导入服务将函数提取到服务中，并在需要时导入服务您可能希望将
props.value
括在方括号中：）您可能希望将
props.value
括在方括号中：）