в React, как вызвать функцию, живущую в другом компоненте?

Question

в моих реакциях 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"), не работает, понятно так.Какой лучший или лучший способ заставить это работать?Как получить доступ к функции из другого файла (компонента)?

Answer 1

Если вы хотите выполнить методы из какого-либо компонента, и результат этих методов изменит глобальное состояние приложения, вы можете воспользоваться actions.Используете ли вы потоковую или избыточную архитектуру, действия могут запускаться из любой части приложения и выполнять изменения в глобальном состоянии, эти изменения будут отражены на любом компоненте, который прослушивает это состояние.

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

Answer 2

Если вы хотите, чтобы ваши кнопки жили в другом компоненте, но получали обработчики от другого компонента, вы можете передавать их через реквизиты.

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 в компоненте App.js следующим образом:

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

... и передать ее компоненту ButtonComponent с помощью реквизитов:

<ButtonComponent searchVenues={this.searchVenues}

Когда вы находитесь в вашем ButtonComponent без состояния, вы можете создать новую функцию внутри него, если вы хотите избежать анонимных функций в вашем рендере ( вы можете прочитать об этом здесь )

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

... и добавьте его в событие onClick:

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

Answer 4

Вы можете либо определить 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().

Надеюсь, это поможет.