Question

在我的反应App.js的{{1}}中，我目前正在以一种有效的方式呼叫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> ); }无法正常工作，这是可以理解的。什么是使其最佳或更好的方法？如何从另一个文件（组件）访问该功能？

Answer 1

我相信您想在App.js组件中声明您的searchVenues函数，如下所示：

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

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

<ButtonComponent searchVenues={this.searchVenues}

一旦您处于无状态ButtonComponent中，就可以在其中创建一个新函数，如果要避免渲染中的匿名函数（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>

Answer 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

Answer 3

您可以在searchVenues中定义ButtonComponent或将其作为道具传递给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()。

希望有帮助。

Answer 4

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

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

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

4 个答案: